var currentDetailImage=0;
(function(){
	/* product switcher */
	var ProductSwitcher = new Class({
		timeout : productFullviewTiming*1000,
		slider : null,
		bound : {},
		cloner : null,
		links : [], 
		initialize : function(options) {
			this.slides = options;
			if ( this.slides.length < 2 ) {
				return;
			}
			this.slider = $('fullview-slider');
			this.slideOptions = $('slide-options');
			if ( ! this.slider ) {
				return;
			}
			
			this.cloner = new Element('img',{
				'id' : 'temp'
			});
			
			this.timer=productFullviewTiming*1000;
			this.preloadImages();
			this.buildSwitchList();
			this.initRotation();
		},
		preloadImages : function() {
			this.slides.each( function( slide ) {
				var img = new Image();
				img.src=slide.src;
				slide.img = img;
			});
		},
		initRotation : function() {
			var self = this;
			if( this.interval !== null ) {
				window.clearInterval( this.interval );
			};
			this.interval = window.setInterval( function() {
				self.rotate.apply(self);
				}, this.timeout);
		},
		rotate : function( updown ) {
			var links=$ES('ul li.product-dot a',this.slideOptions);
			var current = $('gloryshot');
			var index=0;
			var nextindex=0;
			links.each( function( link ) {
				if ( link.hasClass('current') ) {
					if ( updown == -1 ) {
						nextindex=index-1;
					}
					else {
						nextindex=index+1;
					}
				}
				index++;
			});
			if ( nextindex >= links.length ) {
				nextindex=0;
			};
			if ( nextindex <= 0 ) {
						nextindex = links.length -1;
			}
			var nextSrc = productImages[nextindex];
			if ( nextSrc.src == current.src ) {
				return;
			}
			var temporary = this.cloner.clone( false );
			temporary.setProperty( 'src', current.getProperty('src') );
			temporary.injectInside( this.slider);
			current.src=nextSrc.src;
			var self = this;
			var mfx = new Fx.Style( temporary, 'opacity', {
				duration: 400,
				onComplete: function() {
					temporary.remove();
					self.resetCurrentAnchor( links[nextindex] );
					currentDetailImage=nextindex;
					resetPortal();
					assessDetailArrows();
				}
			});
			var img = new Image();
			img.onload = function() {
				mfx.start(1,0);
			}
			// bookmark
			img.src=nextSrc.src;
			
			$('expanded-zoom').removeClass('disabled');
			if ( nextSrc.haszoom > 0 ) {
        if ( producttype=='vistatheme' ) {
          $('expanded-zoom').setProperty( 'href','/vista_expandedzoom.php?i='+nextSrc.iid );
        }
        else if ( producttype=='playstation3' ) {
					$('expanded-zoom').setProperty( 'href', '/ps3_expandedzoom.php?i='+nextSrc.iid );
				}
				else if ( producttype=='desktopextra' ) {
					$('expanded-zoom').setProperty( 'href', '/de_expandedzoom.php?i='+nextSrc.iid );
				}
				else if ( producttype=='windows7' ) {
					$('expanded-zoom').setProperty( 'href', '/expandedzoom.php?type=windows7&i='+nextSrc.iid );
				}
				else {
					$('expanded-zoom').setProperty( 'href', '/expandedzoom.php?i='+nextSrc.iid );
				}
				$('expanded-zoom').removeProperty( 'disabled' );
			}
			else {
				$('expanded-zoom').removeProperty('href' );
				$('expanded-zoom').setProperty( 'disabled', 'disabled' );
				$('expanded-zoom').addClass('disabled');
			}
		},
		buildSwitchList : function() {
			var ul = new Element('ul');
			ul.injectInside(this.slideOptions);			

			this.bound.click = this.onclick.bindWithEvent(this);
			var len = this.slides.length;
			// we're adding two because of the two 
			var width = len*14;
			// adding this to handle the widths of the arrows.
			width += 28;
			var margin = Math.ceil( width/2 );
			ul.setStyle( 'paddingLeft', '5px' );
			ul.setStyle( 'width', width+'px' );
			
			var i = 1;
			this.slides.each(function(slide) {
				var li = new Element('li');
				li.addClass('product-dot');
				var a = new Element('a',{
					'href' : '#',
					onFocus: 'this.hideFocus=true',
					'id' : 'fv_slide_'+i.toString()
				});
				if (i === 1) {
					a.addClass('current');
				}
				a.imgSrc = slide.src;
				a.zoom = slide.zoom;
				a.iid = slide.iid;
				a.haszoom = slide.haszoom;
				a.setText(parseInt(i, 10));
				a.setProperty('title', 'Details Page '+i );
				a.injectInside(li);
				li.injectInside(ul);
				
				a.addEvent('click', this.bound.click);								
				this.links.push(a);
				i = i + 1;
			}, this);
			// ----
			// left arrow click stuff
			var leftli=new Element('li');
			var goleft=new Element('a', {
					'href' : '#',
					onFocus: 'this.hideFocus=true',
					'id' : 'prod-arrow-left' }
					);
			goleft.addClass('arrows-blue-white-left');
			goleft.setText('&lt;');
			goleft.addEvent('click', function(evt){evt=new Event(evt).stop(); });								
			goleft.injectInside(leftli);
			leftli.injectTop(ul);
			// ----
			// right arrow click stuff
			var rightul=new Element('ul');
			var rightli=new Element('li');
			var goright=new Element('a', {
					'href' : '#',
					onFocus: 'this.hideFocus=true',
					'id' : 'prod-arrow-right' }
					);
			goright.addClass('arrows-blue-white-right');
			goright.setText('&gt;');
			goright.addEvent('click', function(evt){evt=new Event(evt).stop();});
			goright.injectInside( rightli );
			rightli.injectInside( ul );
			assessDetailArrows();
		},
		resetCurrentAnchor : function(el) {
			$ES('ul li.product-dot a',this.slideOptions).each(function(item){
				item.removeClass('current');
			});
			$(el).addClass('current');
		},
		onclick : function(event) {
			event = new Event(event).stop();
			if( this.interval !== null ) { window.clearInterval( this.interval ); };
			
			currentDetailImage = parseInt( event.target.getText(), 10 )-1;
			var newSrc = event.target.imgSrc;
			var zoomSrc = event.target.zoom;
			// var zoomId = event.target.iid;
			
			var current = $('gloryshot');
			if (current.getProperty('src') == newSrc) {
				return;
			}
			
			var temporary = this.cloner.clone(false);
			temporary.setProperty('src',current.getProperty('src'));
			temporary.setProperty('alt', 'Windows XP Themes at Hyperdesk' );
			temporary.injectInside(this.slider);
			
			current.src = newSrc;
			//
//			var foo = current.getSize();
//			foo.size.x += 4;
//			$('gloryshot').setStyle( 'width', foo.size.x+'px' );
//			$('gloryshot').setStyle( 'margin-left', 'auto');
			
			var self = this;
			var mfx = new Fx.Style(temporary,'opacity', { 
				duration: 200, 
				onComplete : function(){
					temporary.remove();
					self.resetCurrentAnchor(event.target);
					self.initRotation();
				}
			});
			
			var img = new Image();
			img.onload = function() {
				mfx.start(1,0);
			};
			img.src = newSrc;
			if ( event.target.haszoom > 0 ) {
				$('expanded-zoom').removeClass('disabled');
				$('expanded-zoom').removeProperty( 'disabled' );
        if ( producttype=='vistatheme' ) {
				  $('expanded-zoom').setProperty('href', '/vista_expandedzoom.php?i='+event.target.iid );
        }
        else if ( producttype == 'desktopextra' ) {
  				$('expanded-zoom').setProperty('href', '/de_expandedzoom.php?i='+event.target.iid );
        }
        else if ( producttype == 'playstation3' ) {
  				$('expanded-zoom').setProperty('href', '/ps3_expandedzoom.php?i='+event.target.iid );
        }
        else if ( producttype == 'windows7' ) {
  				$('expanded-zoom').setProperty('href', '/expandedzoom.php?type=windows7&i='+event.target.iid );
        }
        else {
  				$('expanded-zoom').setProperty('href', '/expandedzoom.php?i='+event.target.iid );
        }
			}
			else {
				$('expanded-zoom').removeProperty('href' );
				$('expanded-zoom').setProperty( 'disabled', 'disabled' );
				$('expanded-zoom').addClass('disabled');
			}
			resetPortal();
			assessDetailArrows();
		}
	});

	ps = new ProductSwitcher(productImages);
	var zoomId = 0;
})();

var ps;
var scr = new Fx.Scroll( window );
scr.toElement( 'fullview-a', {duration:0} );
function resetPortal(){
					scr.toElement( 'fullview-a' , {duration:50} );
}

// this function handles the changing of the images based on the arrow clicked.
function changeDetail( dir ) {
				if ( dir=='r' ) {
					ps.rotate();
				}
				else {
					ps.rotate(-1);
				}
				assessDetailArrows();
}

function assessDetailArrows() {
			// this should be the first one.
			if ( currentDetailImage <= 0 ) {
					$('prod-arrow-left').addClass('arrows-blue-white-left-disabled' );
					$('prod-arrow-left').removeClass('arrows-blue-white-left');
					$('prod-arrow-left' ).removeEvents('click');
					$('prod-arrow-left' ).addEvent('click', function(evt) { evt=new Event(evt).stop(); }  );
			}
			else {
					$('prod-arrow-left').addClass('arrows-blue-white-left');
					$('prod-arrow-left').removeClass('arrows-blue-white-left-disabled' );
					$('prod-arrow-left' ).removeEvents('click');
					$('prod-arrow-left' ).addEvent('click', function(evt) { changeDetail('l'); evt=new Event(evt).stop(); }  );
			}
			// this should be the last one.
			if ( currentDetailImage >= productImages.length-1 ) {
					$('prod-arrow-right').addClass('arrows-blue-white-right-disabled' );
					$('prod-arrow-right').removeClass('arrows-blue-white-right');
					$('prod-arrow-right').removeEvents('click');
					$('prod-arrow-right').addEvent('click', function(evt) { evt=new Event(evt).stop(); }  );
			}
			else {
					$('prod-arrow-right').addClass('arrows-blue-white-right');
					$('prod-arrow-right').removeClass('arrows-blue-white-right-disabled' );
					$('prod-arrow-right').removeEvents('click');
					$('prod-arrow-right').addEvent('click', function(evt) { changeDetail('r'); evt=new Event(evt).stop(); }  );
			}
}
// these are the page left and right arrows
// $('prod-arrow-left' ).removeEvents('click');
// $('prod-arrow-left' ).addEvent('click', function(evt) { changeDetail('l'); evt=new Event(evt).stop(); }  );
// $('prod-arrow-right').removeEvents('click');
// $('prod-arrow-right').addEvent('click', function(evt) { changeDetail('r'); evt=new Event(evt).stop(); }  );