[RESOLVED] Flip a picture

OK, the title is a tad misleading.

I have this script :

Main.js

PHP Code:

---

// wave sub objects
function WSubObj(num, img, object, iwidth, iheight){
    this.S = num;
    var o = document.createElement("span");
    o.style.overflow = "hidden";
    o.style.width = iwidth + "px";
    o.style.height = iheight + "px";
    o.style.top = (num-1) + "px";
    var oI = document.createElement("img");
    oI.src = img.src;
    oI.style.left = "0px";
    oI.style.top = (-iheight + num) + "px";
    oI.style.width = iwidth + "px";
    oI.style.height = iheight + "px";
    o.appendChild(oI);
    document.getElementById("wave_zone").appendChild(o);
    this.spa = o.style;
    this.ddx = 0
    this.PX  = 0
    this.x   = 0
    if (num > 0) this.prev = object[num - 1];
}

WSubObj.prototype.main = function(power){
    var x0 = (this.S == 0) ? Math.random() * power : this.prev.x;
    this.x = this.PX += (this.ddx += ( (x0 - this.PX - this.ddx) * 2 ) / 2.8) / 1.4;
    this.spa.left = Math.round(this.x) + "px";
}

// wave effect object
var weff = {
    // variables
    power : 2.2,

    // inner variables
    object : new Array(),
    simg : null,
    iwidth  : 0,
    iheight  : 0,

    // initialization function
    init : function() {
        for (var i = 0; i < this.iheight; i++)
            this.object[i] = new WSubObj(i, this.simg, this.object, this.iwidth, this.iheight);
    },

    // main loop function of water effect
    run : function() {
        var i = 0, o;
        while (o = weff.object[i++]) o.main(weff.power);
        setTimeout(weff.run, 100);
    }
};

// on page load
window.onload = function() {
    weff.simg = document.getElementById("source_img");
    weff.iwidth = weff.simg.width;
    weff.iheight = weff.simg.height;

    // set necessary width and height for wave zone element
    var css = document.getElementById("wave_zone").style;
    css.height = weff.iheight + "px"; //(weff.iheight/4 - 1) + "px";
    css.width  = weff.iwidth + "px";

    weff.init();
    weff.run();
} 


---

With this CSS file :

Main.css

PHP Code:

---

#main_object {
    position: relative;
}
#main_object img {
    display: block;
}
#main_object #wave_zone img {
    position:absolute;
    left:-9999px;
}
#main_object span {
    position:absolute;
    font-size:0px;
}
#main_object #wave_zone {
    position:relative;
    display:block;
    overflow:hidden;
    background-color:#000;
} 


---

Together they give a nice watery, wavy effect for one of my pictures. Problem is: The picture got flipped upside down. I have tried to play around with the script to see if I can identify the flipping part. I am unable to.

Can anyone help identify the part where the picture gets flipped upside down?

What does the HTML look like to match it? I would guess something like the following...but what is main_object?

Code:

---

<span id="wave_zone">
  <img src="http://www.google.com/logos/2012/bram-stoker-2012-hp.jpg" id="source_img" alt="" />
</span>

---

Yes, that is basically it. I just have some CSS inside as well as call to a JS function :

Code:

---

        <div id="main_object" align="center">
                  <img id="source_img" border="0" src="images/cornerblock.png" width="288" height="172" style="position:absolute; top:-626;left:370;overflow:hidden" showOnTop(this); >
            <div id="wave_zone" style="position:absolute; top:-626;left:370;overflow:hidden;background-color: transparent"
  onmouseover="showOnTop(this)"></div>
        </div>

---

Ah, I fixed it. I edited my Main.CSS file to include the CSS Transformations, like this :

PHP Code:

---

#main_object #wave_zone {
    position:relative;
    display:block;
    overflow:hidden;
    background-color:#000;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv; /*IE*/
} 


---

Thanx for your help anyways! :D