/**
 * 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, use_carousel, video)
    {
        /**
         * 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         = typeof(item) == 'undefined' ? false : item; 
        
        this.normal_size  = 'large';
        this.overlay_size = 'large';
        this.zoom_size    = 'xlarge';
        this.thumb_size   = 'xsmall';

        /**
         * Methods
         */
        this.render = function()
            {
                // Render the divs and the images preloader is posible, future?
                var index, images, indexa = new Array(), indexb, k1 = 0, 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><div class="rolltext" id="rolltext">roll on to zoom in</div>';                
                	
                if(video && video[this.color] == '1'){
                    head +='<div class="video_container" style="display: none; height: 415px"><p id="container1" align="center">Please install the Flash Plugin</p></div>';
                    head +='<div id="container" class="video_link" onclick="loadVideo()"><img src="/images/details/PDP_Bridal_Video_Overlay.jpg" style="cursor: pointer;"/></div>';
                }              
                
                if (use_carousel) 
                {
                    head += '<div class="carousel_back"><a href="#"><img src="/images/arrow-back.gif" /></a></div><div id="cont_thumbs" class="thumbs"><ol>';
                    images = this.source[this.color][this.thumb_size];
                    first=-1;
                    for(index in images)
                    {
                         if(/chrome/.test( navigator.userAgent.toLowerCase() ) == true )
                         {
                            indexa[k1] = index;
                            k1++;
                         }
                         else
                         {
                            if(first==-1)
                                first=index;
                            content += '<li id="thumb_' + index +'" ><img src="' + images[index] + '" /></li>';
                         }
                     }
                     if(/chrome/.test( navigator.userAgent.toLowerCase() ) == true )
                     {
                         
                         for(var k2 = 0; k2 < indexa.length; k2++)
                         {
                             k3=indexa.length-2;
                             // this code is for items with 4 pics.
                             if(indexa.length > 3)
                             {
                                first = indexa[k3];
                                    indexb = indexa[k2+2];
                                if(k2 == k3){
                                    indexb = indexa[0];
                                }
                                k3++;
                                if(k2 == k3){
                                    indexb = indexa[1];
                                }
                             }
                             else
                             {
                            // this code is for items with 3 pics.
                             if(indexa.length > 2) 
                                 {
                                    first = indexa[1];
                                    indexb = indexa[k2+1];
                                if(k2 == indexa.length-1)
                                    indexb = indexa[0];
                                 }
                             else
                             {
                            // this code is for items with 2 pics.
                              first = indexa[0];
                              indexb = indexa[k2];
                             }
                             }
                             content += '<li id="thumb_' + indexb +'" ><img src="' + images[indexb] + '" /></li>';
                         }
                     }
                    
                    content += '</ol></div><div class="carousel_next"><a href="#"><img src="/images/arrow-next.gif" /></a></div>';
                }
                else
                {
                    // todo: should we hardcore 'front' key?
                    first = 'front';
                }

                content += '<br style="clear:both;"/></div>';
                content = head + content;

                // Markup generated, time to show it on the actual page
                this.target.innerHTML = content;
                
                // Set some styles
                YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.overlay .tint', this.target), 'opacity', this.opacity_low);
                this.change(first);
                
                // Set up the carousel
                if (use_carousel) 
                {
                    this.carousel = new YAHOO.widget.Carousel('cont_thumbs');
                    this.carousel.set('numVisible', 4);
                    this.carousel.set('animation', { speed: 0.5 });
                    this.carousel.set('isCircular', true);
                    this.carousel.render();

                    // Validate that the next page button is shown only when more than 1 page exists
                    numPages = this.carousel.get('numPages');
                    if(numPages <= 1) {
                        YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.carousel_next', this.target), 'display', 'none');
                        YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.carousel_back', this.target), 'display', 'none');
                    }
                    YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.thumbs ol', this.target), 'height', '94px');
                                        
                    // Register the click on the thumbnails
                    this.carousel.on('itemSelected',
                            function(el, _parent)
                            {
                                var item = this.getElementForItem(el).id.split('_').pop();
                                
                                //hide video if exits
                                var video_container = YAHOO.util.Selector.query('.video_container', _parent.target)[0];
                                var image_container = YAHOO.util.Selector.query('.overlay', _parent.target)[0];
                                if(video_container && YAHOO.util.Dom.getStyle(image_container, 'display') == 'none'){
                                    YAHOO.util.Dom.setStyle(video_container, 'display', 'none');
                                    //need to do this to make sure the the video will load from the beginning on IE7/8
                                    video_container.innerHTML = '<p id="container1" align="center">Please install the Flash Plugin</p>';
                                    YAHOO.util.Dom.setStyle(image_container, 'display', 'block');                            
                                }
                                
                                _parent.change(item);
                            }, this);
                
                    // Register the next page on the carousel
                    YAHOO.util.Event.addListener(YAHOO.util.Selector.query('.carousel_next a', this.target), 'click',
                    		function(el, _parent)
                    		{
                    			var i=0, item = 0, last;
                    			_parent.carousel.scrollPageForward();
                    			YAHOO.util.Event.preventDefault(el);
                    		}, this);

                    // Register the prev page on the carousel
                    YAHOO.util.Event.addListener(YAHOO.util.Selector.query('.carousel_back a', this.target), 'click',
                            function(el, _parent)
                            {
                                var i=0, item = 0, last;
                                _parent.carousel.scrollPageBackward();
                                YAHOO.util.Event.preventDefault(el);
                            }, this);
                }
                

                // 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],
                                th,tw,zh,zw;
                			
                			// Check if the overlay is hidden, if it is then unhide it
                			if(YAHOO.util.Dom.getStyle(target, 'visibility') == 'hidden') {
	                			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');
                                YAHOO.util.Selector.query('#rolltext', _parent.target)[0].innerHTML = 'roll off to zoom out';
                			}
                			
                			// 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;
                			}
                			
                            // Try to get the proper values
                            th = target.offsetWidth;
                            tw = target.offsetHeight;
                            zh = zoom.offsetHeight;
                            zw = zoom.offsetWidth;
                            
                            // Check if the box needs to be moved horizontally
                            temp=-1;
                            if(l<tw/2)
                                temp=0;
                            else if(l > (evSource.offsetWidth - tw/2))
                                temp=evSource.offsetWidth-tw;
                            else
                                temp = l - tw/2;
                            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) * temp * -1) - 10) + 'px');
                            }
                			
                            // Check if the box needs to be moved vertically
                            temp=-1;
                            if(t<th/2)
                                temp=0;
                            else if(t > (evSource.offsetHeight - th/2))
                                temp=evSource.offsetHeight - th;
                            else
                                temp = t - th/2;
                            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) - 10) + 'px');
                            }
                		}, this);
                
                YAHOO.util.Event.addListener(YAHOO.util.Selector.query('.overlay', this.target), 'mouseout',
                		function(e, _parent)
                		{
                            if (!e) var e = window.event;
                            var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
                            if (YAHOO.util.Dom.isAncestor(this, reltg)) return;
                            
            				YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.tint',   _parent.target)[0], 'opacity', '0');
            				YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.inzone', _parent.target)[0], 'visibility', 'hidden');
            				YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.zoom',   _parent.target)[0], 'visibility', 'hidden');
                            YAHOO.util.Selector.query('#rolltext',  _parent.target)[0].innerHTML = 'roll on to zoom in';
                		}, this);
            };
                   
        // Change the current big picture
        this.change = function(who)
            {
                YAHOO.util.Selector.query('.big', this.target)[0].src = this.source[this.color][this.normal_size][who];
                YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('.overlay', this.target), 'background-image', 'url(' + this.source[this.color][this.overlay_size][who] + ')');
                YAHOO.util.Selector.query('.zoomArea', this.target)[0].src = this.source[this.color][this.zoom_size][who];
            };
        
        // Switch the color
        this.switchColor = function(newColor)
            {                
                this.color = newColor;
                this.render();
            };
        
        this.getCurrent = function()
            {
                return {'item': this.item, 'color': this.color};
            };
            
        this.render();
    };