/// <reference path="../jquery-1.2.6.js"/>
/// <reference path="../plugins/jquery.dimensions.min.js"/>

shopr.AddImageBox = function(id, index, reviewobj) {
    if (id, index, reviewobj) {
        this.init(id, index, reviewobj); 
    }
};

shopr.AddImageBox.prototype = {

    id: null,
    target: null,
    review: null,
    index: null,

    init: function(id, index, reviewobj) {

        this.id = id;
        this.index = index;
        this.review = reviewobj;
        target = document.getElementById("ReviewImage");
        jQuery("#" + this.id).bind("click", this, this.onClick);
    },

    updateSelected: function() {
        document.getElementById('ImageOptionDiv' + this.index).className = 'selImageDivSelected';
        //document.getElementById('ImageCheck' + this.index).className = 'ImageCheckOn';
    },
    onClick: function(e) {

        var obj = e.data;

        jQuery("#ImageHolder").css('display', '');

        //clone ImageOption that was clicked on
        var ImageOption = document.getElementById(this.id);
        var ImageTag = document.getElementById('ImageOption' + obj.index);
        var ImageTagClone = ImageTag.cloneNode(true);
        ImageTagClone.id = 'imgtagclone';

        //add image clone to holder for motion
        var holder = document.getElementById('ImageHolder');

        var myTable = document.createElement("table");
        myTable.className = 'selImageTable';
        var tb = document.createElement("tbody");
        var newTR = document.createElement("tr");
        newTR.setAttribute('valign', 'center');
        var newTD = document.createElement("td");
        newTD.setAttribute('valign', 'center');
        newTD.appendChild(ImageTagClone);
        newTR.appendChild(newTD);
        tb.appendChild(newTR);
        myTable.appendChild(tb);
        holder.innerHTML = "";
        holder.appendChild(myTable);

        //position holder on clicked on item
        jQuery(holder).css('position', 'absolute');
        var xyImageOption = jQuery(ImageOption).offset();

        jQuery(holder).css('left', xyImageOption.left);
        jQuery(holder).css('top', xyImageOption.top);

        var xy = jQuery('#ReviewImageBox').offset();

        jQuery(holder).animate({ "left": xy.left, "top": xy.top }, 150, "linear",
            function() {
                jQuery(this).css('display', 'none');
                obj.review.updateImage(obj);
            }
        );

        obj.review.updateSelected(obj);

    },
    onAnimComplete: function(type, args) {
        jQuery("#ImageHolder").attr('style', { display: "none" });
        //YAHOO.util.Dom.setStyle('ImageHolder', 'display', 'none');
        gRI.updateImage(this);
    }

};