var scOpacity;
var scColor;
var topLeft;
var bottomRight;
Event.observe(window, 'resize', scResize);
    
function scSetup(color, opacity) {
    try {
        scOpacity = opacity;
        scColor = color;

        var img = $$('.pb_image')[0];
        img.absolutize();

        topLeft = {x:img.cumulativeOffset()[0] , y: img.cumulativeOffset()[1]};
        bottomRight = {x:img.cumulativeOffset()[0] + img.getWidth() , y: img.cumulativeOffset()[1]+ img.getHeight()};

        img.relativize();

        if (Prototype.Browser.IE) {
            topLeft.x = topLeft.x ;
            bottomRight.x = bottomRight.x+1;
        }

        var tlDiv = document.createElement('div');
        tlDiv.id = 'tlDiv';

        Element.setStyle(tlDiv, {
            backgroundColor: color,
            width: img.getWidth() + 'px',
            height: '0px',
            position:'absolute',
            top: topLeft.y + 'px',
            left: topLeft.x + 'px'
        });

        var brDiv = document.createElement('div');
        brDiv.id = 'brDiv';
        Element.setStyle(brDiv, {
           backgroundColor: color,
           width: img.getWidth() + 'px',
           height: '0px',
           position:'absolute',
           top: bottomRight.y + img.getHeight() + 'px',
           left: bottomRight.x + img.getWidth() + 'px'
        });


        tlDiv.setOpacity(opacity / 100);
        brDiv.setOpacity(opacity / 100);

        document.body.appendChild(tlDiv);
        document.body.appendChild(brDiv);

        /* Setup the first item in the dropdown.  We're doing this in a try
         * for when there isn't a dropdown on page it still works (table).
         */
        try {
            control = $$('select.pbAddToCartItem')[0];
            scDrawMask(control.options[control.selectedIndex].text);
        }
        catch (e) {}
        scAttach();
    }
    catch (e) { console.info(e); }

}

function scDrawMask(str) {
    $('tlDiv').hide();
    $('brDiv').hide();
    
    try {
        if (!str.match(/\d+x\d+/)) {
            return;
        }

        size = str.match(/\d+x\d+/)[0].split('x');
        var oSize = {width:size[1], height:size[0], ratio:size[1]/size[0]};
        var nSize = {width:size[0], height:size[1], ratio:size[0]/size[1]};
        
        var img = $$('.pb_image')[0];
        size = img.getDimensions();
        var imgSize = {width:size.width, height:size.height, ratio:size.width/size.height};

        if (Math.abs(oSize.ratio - imgSize.ratio) < Math.abs(nSize.ratio - imgSize.ratio)) {
            newSize = oSize;
        }
        else {
            newSize = nSize;
        }


        lsSize = {width:newSize.width * imgSize.width / newSize.width,
            height:newSize.height * imgSize.width / newSize.width};

        if (lsSize.height > imgSize.height || lsSize.width > imgSize.width) {
            lsSize.width = newSize.width * imgSize.height / newSize.height;
            lsSize.height = newSize.height * imgSize.height / newSize.height;
        }

        
        if (newSize.ratio < imgSize.ratio) {
            divSize = {width: (imgSize.width - lsSize.width) / 2, height: imgSize.height};

            $('tlDiv').setStyle({
                height: divSize.height + 'px',
                width: divSize.width + 'px',
                top: topLeft.y + 'px',
                left: topLeft.x + 'px'
            });
            $('brDiv').setStyle({
                height:divSize.height + 'px',
                width: divSize.width + 'px',
                top: bottomRight.y - imgSize.height + 'px',
                left: bottomRight.x - divSize.width + 'px'
            });
        }
        else if (newSize.ratio > imgSize.ratio) {
            divSize = {width: imgSize.width, height: (imgSize.height - lsSize.height) / 2};
            $('tlDiv').setStyle({
               height: divSize.height + 'px',
               width: divSize.width + 'px',
               top: topLeft.y + 'px',
               left: topLeft.x + 'px'
            });
            $('brDiv').setStyle({
               height: divSize.height + 'px',
               width: divSize.width + 'px',
               top: bottomRight.y - divSize.height + 'px',
               left: bottomRight.x - imgSize.width + 'px'
            });
        }
        else {
            $('tlDiv').setStyle({height:'0px', width:'0px'});
            $('brDiv').setStyle({height:'0px', width:'0px'});
        }
        if ($('tlDiv').getHeight() < 2 || $('tlDiv').getWidth()<2) {
            $('tlDiv').hide();
            $('brDiv').hide(); 
        }
        else {
            $('tlDiv').show();
            $('brDiv').show();
        }
    }
    catch (e) { 
        $('tlDiv').hide();
        $('brDiv').hide();
    }
}

function scResize() {
    $('tlDiv').hide();
    $('brDiv').hide();
    var img = $$('.pb_image')[0];
    img.absolutize();

    topLeft = {x:img.cumulativeOffset()[0] , y: img.cumulativeOffset()[1]};
    bottomRight = {x:img.cumulativeOffset()[0] + img.getWidth() , y: img.cumulativeOffset()[1] + img.getHeight()};

    img.relativize();

    if (Prototype.Browser.IE) {
        topLeft.x = topLeft.x ;
        bottomRight.x = bottomRight.x-1;
    }

    Element.setStyle('tlDiv', {
        top: topLeft.y + 'px',
        left: topLeft.x + 'px'
    });
    Element.setStyle('brDiv', {
       top: bottomRight.y - $('brDiv').getHeight() + 'px',
       left: bottomRight.x - $('brDiv').getWidth() + 'px'
    });

    $('tlDiv').show();
    $('brDiv').show();
}

function scAttach() {
    // Dropdown list
    if ($$('select.pbAddToCartItem')[0]) {
        try {
            Event.observe($$('select.pbAddToCartItem')[0], 'change',
                function() {
                    control = $$('select.pbAddToCartItem')[0];
                    scDrawMask(control.options[control.selectedIndex].text);
                });
            Event.observe($$('select.pbAddToCartItem')[0], 'keyup',
                function() {
                    control = $$('select.pbAddToCartItem')[0];
                    scDrawMask(control.options[control.selectedIndex].text);
                });

            }
        catch (e) {}
    }

    // Table list
    if ($$('table.pbAddToCartTable')) {
        try {
            var cellList = $$('.pbAddToCartRow');
            var str =[];
            for (i=0; i<cellList.length; i++) {
                str[i] = "";
                var quantityCell = cellList[i].select('td.pbAddToCartQuantityCell');
                var quantityControl = null;
                var itemCell = cellList[i].select('td.pbAddToCartDescription');

                if (itemCell[0]) {
                    str[i] = itemCell[0].innerHTML;
                }
                if (quantityCell[0]) {
                    quantityControl = quantityCell[0].firstDescendant();
                    if (quantityControl) {
                        Event.observe(quantityControl, 'focus',
                        function(evt) {
                            var str = "";
                            try {
                                str = this.up('tr.pbAddToCartRow').down('td.pbAddToCartDescription').innerHTML;
                            }
                            catch (e) {
                                str = "";
                            }
                            scDrawMask(str); 

                        });
                    }
                }


            }
            

        }
        catch (e) {
            
        }
    }
}