/**
 * Showcase display for the product with diferent thumbnails and zoom
 *
 * @param {Object} div    The target div
 * @param {Object} images The images that will be used
 */
var Showcase = function(div, images, color, item_id, group) {

    /**
     * Properties
     */
    this.target       = YAHOO.util.Selector.query(div)[0];
    this.source       = images;
    this.rel          = 900 / 275;
    this.opacity_high = 0.5;
    this.opacity_low  = 0;
    this.carousel     = false;
    this.color        = color;
    this.item_id      = item_id;
    if(typeof(group) == 'undefined')
        this.group    = false;
    else
        this.group    = group;

    this.quickView = false;
    this.setQuickView = function(){this.quickView = true;}

    /**
     * Methods
     */

    /**
     * Adds the perspective boxes for the front, back, etc.. images
     *
     * @param string perspective How to name the perspective (front, back, etc)
     * @param string src         Path where to find the image for this perspective
     */
    this.addPerspective = function(perspective, src) {
        var html = '<div class="addtl_view_container"> \
                   <a href="#"> \
                       <img src="' + src + '" id="thumb_' + perspective +'" class="addtl_view"/> \
                   </a> \
               </div>';
        return html;

    }

    /**
     * Main function, renders the full zoom tool
     */
    this.render = function() {
            // Render the divs and the images preloader is posible, future?
            var index, images, arr, head = '<div class="showcase"><div class="zoom">', numPages, temp, first, content='';

            // Bug fix for combo boxes showing where they don't have to show on IE6... don't ask
            if(YAHOO.env.ua.ie == 6)
                head += '<iframe class="zoomIframe" frameborder="0"></iframe>';

            // Continue to generate the markup
            head +='<img src="" class="zoomArea" /></div><div class="overlay"><div class="tint"></div><div class="inzone"><img src="" class="big" /></div></div>';

            head +="<div class='view_large'>"
            if (!this.quickView) {
                head += " roll over image to zoom ";
            }
            if (this.group) {
                head += "</div>";
            } else {
                head += "        <a href='/viewLarger?item=" + this.item_id + "' target='popup' \
                           onclick=\"window.open(this.href,this.target,'width=750,height=753,toolbar=no,scrollbars=no')\"> \
                           <img src='/images/product_detail/btn_viewLarger.gif' style='vertical-align:middle'> \
                        </a> \
                    </div>";
            }
            
            if (!this.group) {
                head += '<div id="cont_thumbs" class="thumbs"><div id="more_views" class="more_views">';
                images = this.source[this.color]['xsmall'];
                
                var topPerspectives = ['front', 'back'];
                for (var i in topPerspectives) {
                    var perspective = topPerspectives[i];
                    if (typeof(images[perspective]) != 'undefined') {
                        content += this.addPerspective(perspective, images[perspective])
                    }
                }
                
                for (index in images) {
                    if (index == 'front' || index == 'back') 
                        continue;
                    content += this.addPerspective(index, images[index]);
                }
            }
            content += '</div></div><br style="clear:both;"/></div>';
            content=head+content;

            // Markup generated, time to show it on the actual page
            this.target.innerHTML = content;
            first=YAHOO.util.Selector.query('.addtl_view_container',this.target)[0];
            YAHOO.util.Dom.addClass(first, 'addtl_view_selected');

            // Set some styles
            YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.overlay .tint', this.target), 'opacity', this.opacity_low);
            this.change('front');
            if (!this.quickView) {
                this.zoomTool();
            }

            // This adds the listener of the perspective icons, to change the big picture image
            YAHOO.util.Event.addListener(YAHOO.util.Selector.query('.addtl_view_container'), 'click',
                function(e)
                {
                    var views = YAHOO.util.Selector.query('.addtl_view_container');
                    for (i in views) {
                        YAHOO.util.Dom.removeClass(views[i],"addtl_view_selected");
                    }
                    YAHOO.util.Dom.addClass(this,"addtl_view_selected");

                    var img =  YAHOO.util.Selector.query('img', this, true);
                    var id = img.id.split('_').pop();
                    showcase.change(id);
                    YAHOO.util.Event.preventDefault(e);
                });
        };

    this.zoomTool = function(){

            // Register the mouseover event
            YAHOO.util.Event.addListener(YAHOO.util.Selector.query('.overlay', this.target), 'mousemove',
                    function(el, _parent)
                    {
                        // Preselect everything that is going to be used more than once for performance reasons
                        // as YUI is not that fast for that.
                        var target = YAHOO.util.Selector.query('.overlay .inzone', _parent.target)[0],
                            evSource = YAHOO.util.Selector.query('.overlay', _parent.target)[0],
                            dim = YAHOO.util.Dom.getXY(evSource), l, t, force = false,
                            image = YAHOO.util.Selector.query('.big', _parent.target)[0], temp,
                            zoom = YAHOO.util.Selector.query('.zoomArea', _parent.target)[0];

                        // Check if the overlay is hidden, if it is then unhide it
                        if(YAHOO.util.Dom.getStyle(target, 'visibility') == 'hidden') {
                            force = true; // force the relocation of the selection box
                            YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.overlay .tint', _parent.target), 'opacity', _parent.opacity_high);
                            YAHOO.util.Dom.setStyle(target, 'visibility', 'visible');
                            YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.zoom', _parent.target)[0], 'left', (YAHOO.util.Dom.getX(evSource) + evSource.offsetWidth + 10) + 'px');
                            YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.zoom', _parent.target)[0], 'visibility', 'visible');
                        }

                        // Get the offset for the select box
                        if(el.pageX || el.pageY) { // this works for anything that it's not IE
                            l = el.pageX - dim[0];
                            t = el.pageY - dim[1];
                        } else { // this is for IE6... don't ask
                            l = el.clientX - dim[0] + document.body.scrollLeft + document.documentElement.scrollLeft;
                            t = el.clientY - dim[1] + document.body.scrollTop + document.documentElement.scrollTop;
                        }

                        // Check if the box needs to be moved horizontally
                        temp=-1;
                        if(l<86)
                            temp=0;
                        else if(l > (evSource.offsetWidth - 90))
                            temp=evSource.offsetWidth-178;
                        else
                            temp = l - 90;
                        if (temp >= 0) {
                            YAHOO.util.Dom.setStyle(target, 'left', temp + 'px');
                            YAHOO.util.Dom.setStyle(image, 'left', ((temp + 2) * -1) + 'px');
                            YAHOO.util.Dom.setStyle(zoom, 'left', (((zoom.offsetWidth / (evSource.offsetWidth)) + 1) * temp * -1) + 'px');
                        }
                        // Check if the box needs to be moved vertically
                        temp=-1;
                        if(t<68)
                            temp=0;
                        else if(t > (evSource.offsetHeight - 67))
                            temp=evSource.offsetHeight - 134;
                        else
                            temp = t - 67;
                        if(temp>=0) {
                            YAHOO.util.Dom.setStyle(target, 'top', temp + 'px');
                            YAHOO.util.Dom.setStyle(image, 'top', ((temp + 2) * -1) + 'px');
                            YAHOO.util.Dom.setStyle(zoom, 'top', ((zoom.offsetHeight / evSource.offsetHeight) * temp * -1) + 'px');
                        }
                    }, this);

            YAHOO.util.Event.addListener(YAHOO.util.Selector.query('.overlay', this.target), 'mouseout',
                    function(e, _parent)
                    {
                        YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.tint', this)[0], 'opacity', '0');
                        YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.inzone', this)[0], 'visibility', 'hidden');
                        YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.zoom')[0], 'visibility', 'hidden');
                    }, this);


    }

    // Change the current big picture
    this.change = function(who)
        {
            YAHOO.util.Selector.query('.big', this.target)[0].src = this.source[this.color]['medium'][who];
            YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.overlay'), 'background-image', 'url(' + this.source[this.color]['medium'][who] + ')');
            YAHOO.util.Selector.query('.zoomArea', this.target)[0].src = this.source[this.color]['xlarge'][who];
        };

    // Switch the color
    this.switchColor = function(newColor)
        {
            this.color = newColor;
            this.render();
        };
};