/**
 * productDetail.js
 * Javascript to serve the adidas Product Catalog detail page.
 * @author ncooley
 */
if(window['console'] === undefined)
  window.console = { log: function(){} };

//New and Improved jQuery widget sliderBox
		
$pC.adi = {};
var SliderBox = {
	
	init: function(){
		$thisElement = $pC(this.element);
		this.range = 3;
		this.totalElements = $thisElement.find('li').size()-1; //trying to keep totalElements ZERO-based
				
		if(this.range < this.totalElements +1 ){ //determine if I even need this... 
			this.current = 0;
			this.width = $thisElement.width();
			this.$this = $thisElement;
			this.thisId = $thisElement.attr('id');
			this.$box = $thisElement.find('ul');
			
			$thisElement.find('.body').wrapInner('<div class="clearfix sliderBox added"><div class="clearfix light"></div></div>')			
			this.$box.css({width: (this.$box.find('li').width() * (this.totalElements+3))})

			$pC('<div class="left"></div><div class="right"></div>').insertBefore(this.$box.parent());
			
			var self = this;
			
			this.$this.find('.right').click(function(){
				self.right();
			})
			this.$this.find('.left').click(function(){
				self.left();
			})
		}
		else{
			$thisElement.find('.body').wrapInner('<div class="clearfix nosliderBox"></div>')			
		}																
	},	
	mvBox : function(selector, direction){						
		this.$box.animate({left:-($pC(selector).position().left)},1000);
	},
	left: function(){		
		if((this.current - this.range) >= 0){
			this.current -= this.range;
			var selector = '#' + this.thisId + ' li:eq(' + this.current + ')';
			this.mvBox(selector, 'left');
		}
	},
	right: function(){
		if((this.current + (this.range)) <= this.totalElements){
			this.current += this.range;
			var selector = '#' + this.thisId + ' li:eq(' + this.current + ')';
			this.mvBox(selector, 'right');
		}		
	}						
}

var ScrollerBox = {
			init:function(element){
				var self = this;
				this.$thisElement = $pC(this.element).find('.body');
				this.range = 180;
				this.height = this.$thisElement.height();
				this.$sC = this.$thisElement.find('div');
				this.scrollerHeight = this.$sC.height();
								
				if (this.$sC.height() > this.height && this.element.size() > 0) {
					
					this.$thisElement.wrapInner('<div class="clearfix scrollerBox"></div>');
					self.$thisElement.find('.scrollerBox').append('<div class="controls"><div class="up"></div><div class="scroller"></div><div class="down"></div>')
					this.$thisElement.find('.scrollerBox')
						.css({
							'height': function(){
								return self.$thisElement.height() -10
							}
						})
						.end()
						.find('.scrollerBox > div:first-child')
						.addClass('scrollContent');
					this.$thisElement.find('.scroller')
						.css({'height':function(){
							return $pC(this).parents('.body').height() - 30						
						}})
					this.delta = this.height - this.$sC.height();
					
					this.top = this.$thisElement.position().top;
					this.bottom = this.$thisElement.position().top + this.$thisElement.height();
					this.currentTop = this.$thisElement.find('.scrollContent').position().top;
					this.currentBottom = this.$thisElement.find('.scrollContent').height();
					
					
					this.$thisElement.find('.up').click(function(){
						
						if ((self.currentTop + self.range) < 0) {
							self.setPosition('.scrollerBox .scrollContent', $pC('.scrollerBox .scrollContent').position().top + self.range);							
						}
						else{
							self.setPosition('.scrollerBox .scrollContent', 0)
						}
					})
					this.$thisElement.find('.down').click(function(){
						//if there is room to go down... Determined by if scroller's top is above box's top
						
						if ((self.currentTop - self.range) > (self.delta)) {
							self.setPosition('.scrollerBox .scrollContent', $pC('.scrollerBox .scrollContent').position().top - self.range);
						}
						else {
							self.setPosition('.scrollerBox .scrollContent', (self.delta));														
						}						
					})
				}							
			},
			setPosition: function(el, val){
				var self = this; 
				self.$thisElement.find(el).animate({'top': val},'normal', function(){ self.updatePositionValues(val); });				
				
			},
			updatePositionValues: function(val){
				this.currentTop = this.$thisElement.find('.scrollContent').position().top;
				this.currentBottom = this.$thisElement.find('.scrollContent').position().top + this.$thisElement.find('.scrollContent').height();								
			}						
		}


adiPCdetail = {
	init: function(){
		var self = this;
		this.setZOOM();
		$pC('#viewed').sliderBox();
		$pC('#related').sliderBox();
		$pC('#detailSpace #description').scrollerBox();
		$pC('#detailSpace #tech').scrollerBox()
		
		self.assignMO();
		self.setSearch();				
	},
	loadInit:function(){
		
	},
	setSearch: function(){
		$pC('<div class="icnSearch"></div>').insertAfter('#search #keywords');
			$pC('#search input').click(function(){
						if($pC(this).val() === global.productSearch){								
							$pC(this).val('');
						}							
					})
					$pC('#search input').blur(function(){
						if($pC(this).val() === ''){
							$pC(this).val(global.productSearch);
						}							
					})
			$pC('#search div.icnSearch').click(function(){								
				var $this = $pC(this);
				if(($this.siblings('input#keywords').val() != global.productSearch) && ($this.siblings('input#keywords').val() != ""))
				{
					$this.parents('form').submit();		
				}								
			})		
		
	},
	setZOOM: function(){
		if (swfobject.hasFlashPlayerVersion('8')) {
			
			$pC('#heroImage .body *').wrapAll("<div id='zoomContent'></div>");
			
			function loadSWF(el){
				var flashvars = {
					loImg: $pC(el).find('.mediumImage').attr('value'),
					hiImg: $pC(el).find('.largeImage').attr('value'),
					xmlLoc: global.catURI + "/js/zoomtoolXML/messages_" + global.language + ".properties.xml" 
				}
				
				swfobject.embedSWF(global.context + "/js/ZoomTool.swf", "zoomContent", "478", "504", "8.0.0", global.context + '/expressInstall.swf', flashvars, {
					wmode: 'transparent'
				});
			}
			
			loadSWF('#altViews li');
			$pC('#altViews li').click(function(){
				loadSWF(this);
			})
			
		}
		else {
			$pC('#heroImage .body img').fadeIn(500);
			$pC('#altViews img, #altViews shape').click(function(){
				var $self = $pC(this);
				$pC('#heroImage img').fadeOut('slow', function(){
					if ($pC.browser.msie && $pC.browser.version === '6.0') {						
						$pC('#heroImage .body').empty().append("<img src='"+ $self.siblings('.mediumImage').val() + "'/>");						
					}
					else {
						$pC(this).attr('src', $self.siblings('.mediumImage').val())
						$pC(this).animate({
							'opacity': 1
						}, 350).fadeIn('slow');
					}
				
				});
			})
		}
						
	},
	assignMO: function(){		
		var $thumbs = $pC('.extraArticles:has(a:gt(0)) a');		    
			$thumbs.mouseover(function(){
		        $pC(this).addClass('over').siblings().removeClass('over');
				var $pSet = $pC(this).find('ul');
				try{
					var $dSet = $pC(this).parents('body');
					$dSet.find('h1.title').contents().replaceWith($pSet.find('.title').text());
					$dSet.find('span.articleno').contents().replaceWith($pSet.find('.articleno').text());
					$dSet.find('h2.colorway').contents().replaceWith($pSet.find('.colorway').text());
				}
				catch(err){
					 
				}											
		    })	
		}	
}

$pC.widget('adi.scrollerBox', ScrollerBox); 
$pC.widget('adi.sliderBox', SliderBox); 
 	
$pC('#heroImage .body img').hide();
$pC(document).ready(function(){	
	adiPCdetail.init();		
});	

$pC(window).ready(function(){	
	adiPCdetail.loadInit();		
})