var first = "before";
var last  = "after";

function flipperObject (path, id)
{
    this.path   = path;
    this.id     = id;
    this.img_id = id + "_i";
    
    this.element = document.createElement ("DIV");
    this.element.id = id;
    this.img     = document.createElement ("IMG");
    this.img.id = this.img_id;
    this.img.alt = "";
    if (this.path != "")
        this.img.src = this.path;
    this.element.appendChild (this.img);
    this.img = this.element.firstChild;
    
    // functions.
    this.apply = function ()
    {
        this.element.id = this.id;
        this.img.id = this.img_id;
        if (this.path != "")
        {
            document.getElementById (this.img_id).src = this.path;
        }
    }
}


//////////////////
// ImageFlipper //
//////////////////

function ImageFlipper (objects, outerDiv)
{
    this.objects = objects;
    this.outerDiv = outerDiv;
    
    var outer_div = document.getElementById (outerDiv);
    for (i = 0; i < objects.length; i++)
    {
        outer_div.appendChild (objects[i].element);
    }
    
    // functions.
    this.append  = append;
    this.prepend = prepend;
}


function append (img)
{
    this.objects[this.objects.length-1].path = img;
    this.objects[this.objects.length-1].apply();
    var ids = new Array();
    var img_ids = new Array();
    for (i=0; i < this.objects.length; i++)
    {
        ids[i] = this.objects[i].id;
        img_ids[i] = this.objects[i].img_id;
    }
        
    var outer_div = document.getElementById(this.outerDiv);
    var preserved_id = this.objects[0].id;
    outer_div.removeChild (document.getElementById (this.objects[0].id));

    
    for (i = 0; i < this.objects.length-1; i++)
    {
        this.objects[i] = this.objects[i+1];        
        this.objects[i].id = ids[i];
        this.objects[i].img_id = img_ids[i];
        if (i != 0) // I wanna keep them up
            this.objects[i].element.style.top = 20 * (i+1) + "px";
        this.objects[i].apply();
    }
    
    var obj = new flipperObject ("b.png", last);
    this.objects[i] = obj;
    outer_div.appendChild (this.objects[i].element);
    
    for (i=0; i<this.objects.length; i++)
    {
        var myEffect = new Fx.Style (this.objects[i].id, 'top');
        myEffect.start (20 * (i+1), 20 * i);
    }
}

function prepend (img)
{
    this.objects[0].path = img;
    this.objects[0].apply();
    var ids = new Array();
    var img_ids = new Array();
    for (i=0; i < this.objects.length; i++)
    {
        ids[i] = this.objects[i].id;
        img_ids[i] = this.objects[i].img_id;
    }
        
    var outer_div = document.getElementById(this.outerDiv);
    var preserved_id = this.objects[this.objects.length-1].id;
    outer_div.removeChild (document.getElementById (this.objects[this.objects.length-1].id));
    
    for (i = this.objects.length-1; i > 0; i--)
    {
        this.objects[i] = this.objects[i-1];        
        this.objects[i].id = ids[i];
        this.objects[i].img_id = img_ids[i];
        if (i != 0) // I wanna keep them down
            this.objects[i].element.style.top = 20 * (i-1) + "px";
        this.objects[i].apply();
    }
    
    var obj = new flipperObject ("b.png", first);
    this.objects[i] = obj;
    outer_div.appendChild (this.objects[i].element);
    this.objects[i].element.style.top = 20 * (i-1) + "px";
    
    for (i=0; i<this.objects.length; i++)
    {
        var myEffect = new Fx.Style (this.objects[i].id, 'top');
        myEffect.start (20 * (i-1), 20 * i);
    }
}