/* 
 * PIONEER scripts
 * 
 * a: Stijn Van Minnebruggen
 * c: These Days
 * w: www.thesedays.com
 * 
 */

var tbs;

Event.observe(window, 'load', function() {
	
	// START EFFECTS
		tbs = new tabsection();

	
	// SLIDERNAV: KURO Campaign
		var sliderNavOptions = {
			// required
				trigger_class:			'slider_nav',			// class name for the trigger
				moveObj_id:				'slider_nav_mover',		// id name of the item that has to be moved (contains a number of sub-items)
			
			// not required
				backBtn_class:			'previous_button',			// class name of the left (back) button
				back_disabled_class:	'previous_button_disabled',	// class name of the right (back) button disabled
				nextBtn_class:			'next_button',				// class name of the right (next) button
				next_disabled_class:	'next_button_disabled',		// class name of the right (next) button disabled
				autoScroll:				true,						// enable/disable auto scrolling  [default: true]
				autoScrollTimer:		5,							// time of the autoScroll in seconds [default: 5]
				animationSpeed:			0.5,							// time of the animation (slide-effect) in seconds (use point for decimals: no comma) [default: 1]
				numScrollItems:			1							// number of items in one scroll-animation [default: 1]
		};
		var sliderNav = new scroller(sliderNavOptions);
	
	// 
		if ( $('choose_kuro') ) initChooseKuro();
});


/*
 * SCROLLER
 * 
 */

var scroller = Class.create();
scroller.prototype = {
	
	triggerObjName:		null,
	overflowObj:		null,
	movingObjName:		null,
	btnLeft:			null,
	btnLeftDisabled:	null,
	btnRight:			null,
	btnRightDisabled:	null,
	
	autoScroll:			true,
	autoScrollTimer:	5,
	
	animationSpeed:		1,
	numScrollItems:		1,

	itemWidth:			null,
	itemsWidth:			null,
	visibleWidth:		null,
	numItems:			0,
	visibleItems:		1,
	currItem:			1,
	currDirection:		1,
	animating:			false,
	iv:					null,
	
	initialize: function(opt) {
		
		// initialize options
			if(opt) {
				if(opt.trigger_class) this.triggerObjName = opt.trigger_class;	// required
				if(opt.moveObj_id) this.movingObjName = opt.moveObj_id;			// required
				if(opt.backBtn_class) this.btnLeft = opt.backBtn_class;
				if(opt.back_disabled_class) this.btnLeftDisabled = opt.back_disabled_class;
				if(opt.nextBtn_class) this.btnRight = opt.nextBtn_class;
				if(opt.next_disabled_class) this.btnRightDisabled = opt.next_disabled_class;
				if(opt.autoScroll == true || opt.autoScroll == false) this.autoScroll = opt.autoScroll;
				if(opt.autoScrollTimer) this.autoScrollTimer = opt.autoScrollTimer;
				if(opt.animationSpeed) this.animationSpeed = opt.animationSpeed;
				if(opt.numScrollItems) this.numScrollItems = opt.numScrollItems;
			}
		
		// check if exists
			if(!this.movingObjName.blank() && $(this.movingObjName)) {
				
				// set first settings
					this.numItems = $$('.'+this.triggerObjName+' #'+this.movingObjName+' li').size();
					if($(this.movingObjName).down()) this.itemWidth = $(this.movingObjName).down().getWidth();
					this.itemsWidth = Math.round(this.itemWidth * this.numItems);
					this.overflowObj = $(this.movingObjName).up();
					this.visibleWidth = this.overflowObj.getWidth()+1; // added one pixel because IE sucks
					$(this.movingObjName).style.width = this.itemsWidth+'px';
					this.visibleItems = Math.round(this.visibleWidth / this.itemWidth);
				
				// has to scroll?
					if(this.hasToScroll()) {
						
						// add left event listener
							this.disableLeftBtn();
							$$('.'+this.triggerObjName+' .'+this.btnLeft).each(function(e) {
								Event.observe(e, 'click', function(){
									if (!this.animating) this.moveScrollerFromButton(-1);
								}.bind(this));
							}.bind(this));
						
						// add right event listener
							$$('.'+this.triggerObjName+' .'+this.btnRight).each(function(e) {
								Event.observe(e, 'click', function(){
									if (!this.animating) this.moveScrollerFromButton(1);
								}.bind(this));
							}.bind(this));
						
						// start autoscroll
							if (this.autoScroll) {
								var msSpeed = this.autoScrollTimer * 1000;
								this.iv = setInterval(function(){ this.moveScrollerFromAnimation(); }.bind(this), msSpeed);
							}
						
					} else {
						this.disableLeftBtn();
						this.disableRightBtn();
					}
				
			}
		
	},
	moveScrollerFromButton: function(direction) {
		this.moveScroller('button', direction);
	},
	moveScrollerFromAnimation: function() {
		this.moveScroller('animation', this.currDirection);
	},
	moveScroller: function(from, direction) {
		
		// initial setup
			if(from == 'button') clearInterval(this.iv);
			var nextItem = this.currItem + (direction * this.numScrollItems);
	 		var rightPadding = this.numItems-this.visibleItems+1;
		
		// animate
			if(nextItem > 1-this.numScrollItems && nextItem < rightPadding+this.numScrollItems) {
				
				// check for multiple steps
					if(nextItem > rightPadding) nextItem = rightPadding;
					if(nextItem < 1) nextItem = 1;
				
				// move
					var newPos = this.itemWidth - (nextItem * this.itemWidth);
					new Effect.Morph($(this.movingObjName), {
						duration: this.animationSpeed,
						beforeStart: function(){ this.animating = true; }.bind(this),
						afterFinish: function(){ this.animating = false; }.bind(this),
						style: 'margin-left: ' + newPos + 'px'
					});
				
				// save current
					this.currItem = nextItem;
				
			} else {

				// reloop if animation is playing
					if(from == 'animation') {
						this.currDirection = (this.currDirection == 1) ? -1 : 1;
						this.moveScrollerFromAnimation();
					}
				
			}
		
		// disable buttons
			if(this.currItem < 2) this.disableLeftBtn(); else this.enableLeftBtn();
			if(this.currItem >= rightPadding) this.disableRightBtn(); else this.enableRightBtn();
		
	},
	disableLeftBtn: function() {
		$$('.'+this.triggerObjName+' .'+this.btnLeft)[0].className = this.btnLeft+' '+this.btnLeftDisabled;
	},
	enableLeftBtn: function() {
		$$('.'+this.triggerObjName+' .'+this.btnLeft)[0].className = this.btnLeft;
	},
	disableRightBtn: function() {
		$$('.'+this.triggerObjName+' .'+this.btnRight)[0].className = this.btnRight+' '+this.btnRightDisabled;
	},
	enableRightBtn: function() {
		$$('.'+this.triggerObjName+' .'+this.btnRight)[0].className = this.btnRight;
	},
	hasToScroll: function() {
		if(this.numItems < 1) {
			$$('.'+this.triggerObjName)[0].up().hide();
			return false;
		} else if (this.numItems < 2) {
			$$('.'+this.triggerObjName+' div').each(function(e) { e.hide(); });
			return false;
		} else return (this.itemsWidth > this.visibleWidth) ? true : false;
	}

};


/*
 * TABS
 * 
 */

var tabsection = Class.create();
tabsection.prototype = {
	
	objName:			'inpage_tabs',
	selectedClassName:	'selected',
	
	defaultTab:			false,
	
	initialize: function() {
		if($$('.'+this.objName)) {
			
			// fetch url hash
				this.defaultTab = this.fetchUrlHash();
			
			// loop tabs
				var firstID = false;
				$$('.'+this.objName+' li a').each(function(e) {
					
					// fetch hash
						var currID = e.href.split('#')[1];
						if(!firstID) firstID = currID;
					
					// add event listener
						Event.observe(e, 'click', function(ev){
							if( e.classNames().inspect().indexOf("disabled") == -1 && e.classNames().inspect().indexOf("selected") == -1 ) {
								this.showTab(currID);
							}
							ev.stop();
						}.bind(this));
					
				}.bind(this));
			
			// show default tab
				var showTab = (this.defaultTab) ? this.defaultTab : firstID;
				this.showTab(showTab);
			
		}
	},
	
	fetchUrlHash: function() {
		var h = self.document.location.hash.substring(1);
		return (h) ? h : false;
	},
	
	showTab: function(id) {
		$$('.'+this.objName+' li a').each(function(e) {
			
			// fetch hash
				var currID = e.href.split('#')[1];
			
			// show-hide content divs
				if($(currID)) {
					if (currID == id) {
						$(currID).show();
						e.addClassName(this.selectedClassName);
					} else {
						$(currID).hide();
						e.removeClassName(this.selectedClassName);
					}
				}
			
		}.bind(this));
	}
	
};

/*
 * extra funcs
 * 
 */

Array.prototype.in_array = function(v) {
	for (var i in this) { if (this[i] === v) return i; }
	return -1;
}

/*
 * CHOOSE your KURO
 */
 
function updateTabContent(id) {
	if(document.getElementById) {
		id = id.replace("#","");
		$("visual_choose_2").style.opacity = 0;
		$("visual_choose_2").style.display = 'none';
		$("visual_choose_1").src = $("visual_choose_2").src;
		$("visual_choose_2").src = "/images/KURO_TV/choose_kuro_" + id + ".jpg";
		$("tabs_choose").style.overflow = "hidden";
		new Effect.Appear("visual_choose_2",{ duration: 1 });
	}
}				
function updateControl(id) {
	var on  = id;
	var off = (on=="cm") ? "inch" : "cm";
	//var lbl_inch = $("btn_inch").innerHTML;
	//var lbl_cm   = $("btn_cm").innerHTML; 

	$("btn_"+on).addClassName("selected");
	$("btn_"+off).removeClassName("selected");
	
	$$('.size_'+off).each(function(e) { e.addClassName("hide");});
	$$('.size_'+on).each(function(e) { e.removeClassName("hide");}); 
	
	//$$('.tab_content').each(function(e) {
	//	var s = e.innerHTML;
	//	s = s.replace('inch','cm'); 
	//	alert(s);
		
	//	e.replace(s);

	//});
	
}			
function initChooseKuro() {
	if(document.getElementById) {
		$("visual_choose").innerHTML = $("visual_choose").innerHTML + $("visual_choose").innerHTML.replace("_1","_2");
		$("choose_control_inner").style.display = "block";
		updateControl("inch");
	}								
}