/* Detailed Product Information Page - Photo Switcher
---- MJJames - Based upon the YAHOO! PhotoBox Example
*/

		YAHOO.namespace("newmind.webplatform.container");
        YAHOO.namespace("newmind.webplatform");
        
        YAHOO.newmind.webplatform.photoswitcher = function(){ //removes product image and replaces with slideshow html
            var olddiv = document.getElementById('productImage');
            var div = olddiv.parentNode;
            div.removeChild(olddiv);
                
            var mySlideShow = new YAHOO.widget.Module("mySlideShow"); //create a module for the slideshow
            mySlideShow.setBody("<img src=\"#\" id=\"mySlideShow_img\" />"); 
            
            mySlideShow.render(div); // render in our element
        };
        
        YAHOO.newmind.webplatform.getImages = function(elementID){
	        
	        var aryImages = new Array(); //our main array
	        var photos = new Array() // our photos
	        var el = new YAHOO.util.Element(elementID); 
        	var images = el.getElementsByTagName('img'); // pull out imgs from element
        	        	
        	for (i = 0; i < images.length; i++){
        	    aryImages[i] = new Array('src', 'caption'); //our src
        	    aryImages[i]['src'] =  images[i]['src'].replace("ProductThumbsAdditional", "ProductMain");
        	    aryImages[i]['caption'] =  images[i]['alt'];
        	}

	        
	        return aryImages;
                
        };
        
         YAHOO.newmind.webplatform.getImage = function(elementID){
	        
	        var aryImages = new Array(); //our main array
	        var photos = new Array() // our photos
	        var el = new YAHOO.util.Element(elementID); 
    	    aryImages[0] = new Array('src', 'caption'); //our src
    	    aryImages[0]['src'] =  el.src;
    	    aryImages[0]['caption'] =  el.alt;
	        return aryImages;
                
        };
        
        YAHOO.newmind.webplatform.removeDiv = function(elementID){
           var olddiv = document.getElementById(elementID);
           var div = olddiv.parentNode;
           div.removeChild(olddiv);
        
        }
        
                
        // Overrides the handler for the "modal" property with special animation-related functionality 
        
    	YAHOO.widget.ImageBox = function(el, userConfig) { 
	        if (arguments.length > 0) { 
	            YAHOO.widget.ImageBox.superclass.constructor.call(this, el, userConfig); 
	        } 
	    } 
	 
	    // Inherit from YAHOO.widget.Overlay 
	    YAHOO.extend(YAHOO.widget.ImageBox, YAHOO.widget.Panel); 
    	
	    YAHOO.widget.ImageBox.prototype.configModal = function(type, args, obj) { 
	        var modal = args[0]; 
    	 
	        if (modal) { 
	            this.buildMask(); 
    	 
	            if (typeof this.maskOpacity == 'undefined') { 
	                this.mask.style.visibility = "hidden"; 
	                this.mask.style.display = "block"; 
	                this.maskOpacity = YAHOO.util.Dom.getStyle(this.mask,"opacity"); 
	                this.mask.style.display = "none"; 
	                this.mask.style.visibility = "visible"; 
	            } 
    	 
	            if (! YAHOO.util.Config.alreadySubscribed( this.beforeShowEvent, this.showMask, this ) ) { 
	                this.beforeShowEvent.subscribe(this.showMask, this, true); 
	            } 
	            if (! YAHOO.util.Config.alreadySubscribed( this.beforeHideEvent, this.hideMask, this) ) { 
	                this.beforeHideEvent.subscribe(this.hideMask, this, true); 
	            } 
	            if (! YAHOO.util.Config.alreadySubscribed( YAHOO.widget.Overlay.windowResizeEvent, this.sizeMask, this ) ) { 
	                YAHOO.widget.Overlay.windowResizeEvent.subscribe(this.sizeMask, this, true); 
                } 
	        } else { 
	            this.beforeShowEvent.unsubscribe(this.showMask, this); 
	            this.beforeHideEvent.unsubscribe(this.hideMask, this); 
	            YAHOO.widget.Overlay.windowResizeEvent.unsubscribe(this.sizeMask); 
	        } 
	    }; 
    	 
            
        YAHOO.newmind.webplatform.showImageLarge = function(e){

            src = this.src;
            src = src.replace("action=ProductThumbsAdditional","action=ProductThumbsAdditionalLarge") //if it s a multi image its this
            src = src.replace("action=ProductMain","action=ProductThumbsAdditionalLarge") // if its a single image
            alt = this.title.replace("- Click to Enlarge", "");
            var productImageLarge = new YAHOO.widget.ImageBox("productImageLarge", { 
                                                                            effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.45},  
	                                                                        underlay:"none", 
	                                                                        close:true, 
	                                                                        visible:true, 
	                                                                        draggable: false, 
	                                                                        modal:false, 
	                                                                        xy:[420,400],
	                                                                        zindex: 1000,
	                                                                        width:"400px" } ); //create a module for the slideshow
	                                                                        
            productImageLarge.setHeader(alt);
            productImageLarge.setBody("<img src=\"" + src + "\" id=\"productImageLarge_img\" />"); 
            productImageLarge.setFooter("");
            productImageLarge.render(document.body); // render in our element
                       
            YAHOO.newmind.webplatform.container.photoboxLarge.render();
            YAHOO.newmind.webplatform.container.photoboxLarge.show();
            
            productImageLarge.show();
        };
        
               
        // begin photoswitcher sub class //
        
        
			// BEGIN PHOTOBOX SUBCLASS //
			YAHOO.widget.PhotoBox = function(el, userConfig) {
				if (arguments.length > 0) {
					YAHOO.widget.PhotoBox.superclass.constructor.call(this, el, userConfig);
				}
			}
			
			// Inherit from YAHOO.widget.Panel
			YAHOO.extend(YAHOO.widget.PhotoBox, YAHOO.widget.Panel);

			// Define the CSS class for the PhotoBox
			YAHOO.widget.PhotoBox.CSS_PHOTOBOX = "photobox";

			// Define the HTML for the footer navigation
			YAHOO.widget.PhotoBox.NAV_FOOTER_HTML = "<a id=\"$back.id\" href=\"javascript:void(null)\" class=\"back\"><img src=\"/images/slideshow/image_left.gif\" /></a><a id=\"$next.id\" href=\"javascript:void(null)\" class=\"next\"><img src=\"/images/slideshow/image_right.gif\" /></a>";

			// Initialize the PhotoBox by setting up the footer navigation
			YAHOO.widget.PhotoBox.prototype.init = function(el, userConfig) {
				YAHOO.widget.PhotoBox.superclass.init.call(this, el); 
				
				this.beforeInitEvent.fire(YAHOO.widget.PhotoBox);

				YAHOO.util.Dom.addClass(this.innerElement, YAHOO.widget.PhotoBox.CSS_PHOTOBOX);
				
				if (userConfig) {
					this.cfg.applyConfig(userConfig, true);
				}
				
				this.setFooter(YAHOO.widget.PhotoBox.NAV_FOOTER_HTML.replace("$back.id",this.id+"_back").replace("$next.id",this.id+"_next"));
				
				this.renderEvent.subscribe(function() {
					var back = document.getElementById(this.id + "_back");
					var next = document.getElementById(this.id + "_next");

					YAHOO.util.Event.addListener(back, "mousedown", this.back, this, true);
					YAHOO.util.Event.addListener(next, "mousedown", this.next, this, true);

				}, this, true);

				this.initEvent.fire(YAHOO.widget.PhotoBox);
			};

			// Set up the PhotoBox's "photos" property for setting up the list of photos
			YAHOO.widget.PhotoBox.prototype.initDefaultConfig = function() {
				YAHOO.widget.PhotoBox.superclass.initDefaultConfig.call(this);
				
				this.cfg.addProperty("photos", { handler:this.configPhotos, suppressEvent:true });
			};

			// Handler executed when the "photos" property is modified
			YAHOO.widget.PhotoBox.prototype.configPhotos = function(type, args, obj) {
				var photos = args[0];
				
				if (photos) {
					this.images = [];

					if (! (photos instanceof Array)) {
						photos = [photos];
					}

					this.currentImage = 0;

					if (photos.length == 1) {
						this.footer.style.display = "none";
					}

					for (var p=0;p<photos.length;p++) {
						var photo = photos[p];
						var img = new Image();
						img.src = photo.src;
						img.title = photo.caption + " - Click to Enlarge";
						img.id = this.id + "_img";
						img.width = 145
						this.images[this.images.length] = img;
					}

					this.setImage(0);
					
				}
			};

			// Sets the current image displayed in the PhotoBox to the corresponding image in the photo dataset, 
			// and determines whether back and forward arrows should be diplsayed, based on the position in the dataset
			YAHOO.widget.PhotoBox.prototype.setImage = function(index) {
				var photos = this.cfg.getProperty("photos");

				if (photos) {
					if (! (photos instanceof Array)) {
						photos = [photos];
					}
					
					var back = document.getElementById(this.id + "_back");
					var next = document.getElementById(this.id + "_next");
					var img =  document.getElementById(this.id + "_img");
					var title = document.getElementById(this.id + "_title");

					this.currentImage = index;

					var current = this.images[index];

					var imgNode = document.createElement("IMG");
					imgNode.setAttribute("src",current.src);
					imgNode.setAttribute("title",current.title + " - Click to Enlarge");
					imgNode.setAttribute("width",145);
					imgNode.setAttribute("id",current.id);
					
					img.parentNode.replaceChild((this.browser == "safari"?imgNode:current), img);
					
					//this.body.style.height = "auto";

					//title.innerHTML = current.title;

					if (this.currentImage == 0) {
						back.style.display = "none";
					} else {
						back.style.display = "block";
					}

					if (this.currentImage == (photos.length-1)) {
						next.style.display = "none";
					} else {
						next.style.display = "block";
					}
				}
				YAHOO.util.Event.addListener("mySlideShow_img", "click", YAHOO.newmind.webplatform.showImageLarge); //re add handler
			};
			
			// Navigates to the next image
			YAHOO.widget.PhotoBox.prototype.next = function() {	
				if (typeof this.currentImage == 'undefined') {
					this.currentImage = 0;
				}

				this.setImage(this.currentImage+1);
			};

			// Navigates to the previous image
			YAHOO.widget.PhotoBox.prototype.back = function() {
				if (typeof this.currentImage == 'undefined') {
					this.currentImage = 0;
				}

				this.setImage(this.currentImage-1);
			};
			
			
			// END PHOTOBOX SUBCLASS //

			YAHOO.newmind.webplatform.photoswitcher.init = function() {

			    YAHOO.newmind.webplatform.photoswitcher(); // delete our product image and replace with SlideShow HTML
			
				YAHOO.newmind.webplatform.container.photobox = new YAHOO.widget.PhotoBox("mySlideShow", 
				{ 
					fixedcenter:false,
					constraintoviewport:false,
					underlay:"none",
					close:false,
					visible:true,
					draggable:false,
					photos: YAHOO.newmind.webplatform.getImages('productExtraImages'), //// get out images, store them in an array and then remove the html
					width:"145px"
				} );
				
				YAHOO.newmind.webplatform.container.photoboxLarge = new YAHOO.widget.PhotoBox("productImageLarge", 
				{ 
					fixedcenter:true,
					constraintoviewport:false,
					underlay:"none",
					close:true,
					visible:true,
					draggable:false,
					xy:[150,100],
					photos: YAHOO.newmind.webplatform.getImages('productExtraImages'), //// get out images, store them in an array and then remove the html
					width:"400px"
				} );
				
				YAHOO.newmind.webplatform.removeDiv("productExtraImages");
				
			    YAHOO.newmind.webplatform.container.photobox.show();
				YAHOO.newmind.webplatform.container.photobox.render();
				
			}
			
			YAHOO.newmind.webplatform.photoswitcher.performCheck = function(){
                if (document.getElementById("imgSwapCtrl") != null){
			        YAHOO.util.Event.onContentReady("imgSwapCtrl", YAHOO.newmind.webplatform.photoswitcher.init, true); //wait until we are ready
			    }
			    else{
    			    YAHOO.newmind.webplatform.container.photoboxLarge = new YAHOO.widget.PhotoBox("productImageLarge", 
				    { 
					    fixedcenter:true,
					    constraintoviewport:false,
					    underlay:"none",
					    close:true,
					    visible:true,
					    draggable:false,
					    xy:[150,100],
					    photos: YAHOO.newmind.webplatform.getImage('productImage'), //// get out images, store them in an array and then remove the html
					    width:"400px"
				    } );
                    YAHOO.util.Event.addListener("productImage", "click", YAHOO.newmind.webplatform.showImageLarge); //re add handler
                }
            }
    YAHOO.util.Event.addListener(window, "load", YAHOO.newmind.webplatform.photoswitcher.performCheck);