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

Event.observe(window, 'load', function() {
	
	// START EFFECTS
		var acc = new accordion();
		var tgg = new toggler();
		var dwr = new drawers();
		var hpg = new homepageDemo();
		var tip = new tooltip();
		var sbm = new submitButtons();
	
	// NEWS SCROLLER: HOMEPAGE
		var newsScrollerOptions = {
			// required
				trigger_class:		'news_scroller',			// class name for the trigger
				moveObj_id:			'news_scroller_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
				nextBtn_class:		'next_button',				// class name of the right (next) button
				autoScroll:			true,						// enable/disable auto scrolling  [default: true]
				autoScrollTimer:	5,							// time of the autoScroll in seconds [default: 5]
				animationSpeed:		1,							// 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 newsScroller = new scroller(newsScrollerOptions);
	
	// PRODUCT SCROLLER: DESKPAGE
		var productScrollerOptions = {
			// required
				trigger_class:		'desk_category_selector',	// class name for the trigger
				moveObj_id:			'desk_category_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
				nextBtn_class:		'next_button',				// class name of the right (next) button
				autoScroll:			false,						// enable/disable auto scrolling  [default: true]
				autoScrollTimer:	5,							// time of the autoScroll in seconds [default: 5]
				animationSpeed:		1,							// time of the animation (slide-effect) in seconds (use point for decimals: no comma) [default: 1]
				numScrollItems:		5							// number of items in one scroll-animation [default: 1]
		}
		var productScroller = new scroller(productScrollerOptions);
	
	// PRODUCT SCROLLER WITH IMAGES: PRODUCT DETAIL PAGE
		var productImagesOptions = {
			// required
				big_image_id:		'product_visual',			// id name of the big visual
				trigger_class:		'product_selector',			// class name for the trigger
				moveObj_id:			'product_selector_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
				nextBtn_class:		'next_button',				// class name of the right (next) button
				autoScroll:			false,						// enable/disable auto scrolling  [default: true]
				autoScrollTimer:	5,							// time of the autoScroll in seconds [default: 5]
				animationSpeed:		1,							// time of the animation (slide-effect) in seconds (use point for decimals: no comma) [default: 1]
				numScrollItems:		5							// number of items in one scroll-animation [default: 1]
		}
		var pimg = new productImages(productImagesOptions);
	
});



/*
 * ACCORDION
 * 
 */

var accordion = Class.create();
accordion.prototype = {
	
	handleName: 		'accordion_handle',
	handleNameActive:	'accordion_handle_active',
	contentName:		'accordion_content',
	contentTriggerOpen:	'open',
	
	animationSpeed:		.5,
	eventName:			'click',
	
	animating:			false,

	initialize: function() {
		$$('.'+this.handleName, '.'+this.handleNameActive).each(function(e) {
			Event.observe(e, this.eventName, function(){
				if(!this.animating) this.toggleElement(e);
			}.bind(this));
			var nextContent = e.next('.'+this.contentName);
			if(nextContent.className.include(this.contentTriggerOpen)) e.className = this.handleNameActive;
			else nextContent.style.display = 'none';
		}.bind(this));
	},
	
	toggleElement: function(handle) {
		var content = handle.next('.'+this.contentName);
		var opt = {
			duration:		this.animationSpeed,
			beforeStart:	function() { this.animating = true; }.bind(this),
			afterFinish:	function() { this.animating = false; }.bind(this)
		};
		var optOther = { duration: this.animationSpeed };
		if ($(content).style.display == 'none') {
			$$('.'+this.handleName, '.'+this.handleNameActive).each(function(e) {
				if (e == handle) {
					new Effect.BlindDown(content, opt);
					e.className = this.handleNameActive;
				} else {
					new Effect.BlindUp(e.next(0), optOther);
					e.className = this.handleName;
				}
			}.bind(this));
		} else {
			new Effect.BlindUp(content, opt);
			handle.className = this.handleName;
		}
	}
	
}



/*
 * TOGGLER
 * 
 */

var toggler = Class.create();
toggler.prototype = {
	
	handleName: 		'toggle_next',
	contentName:		'toggle_content',
	contentTriggerOpen:	'open',
	
	signOpen:			'(-)',
	signClosed:			'(+)',
	signPosition:		'after',
	
	animationSpeed:		.5,
	animating:			false,
	
	initialize: function() {
		$$('.'+this.handleName).each(function(e) {
			
			// start event listener
				var content = this.fetchNext(e);
				Event.observe(e, 'click', function(){ if(content) this.toggleElement(e); }.bind(this));
			
			// open-close and add handles
				if (content && content.className.include(this.contentTriggerOpen)) {
					if(this.signPosition == 'after') e.innerHTML += this.signOpen;
					else e.innerHTML = this.signOpen + e.innerHTML;
				} else if(content) {
					content.style.display = 'none';
					if(this.signPosition == 'after') e.innerHTML += ' ' + this.signClosed;
					else e.innerHTML = this.signClosed + ' ' + e.innerHTML;
				}
			
		}.bind(this));
	},
	
	toggleElement: function(handle) {
		
		// set options
			var content = this.fetchNext(handle);
			var opt = {
				duration:		this.animationSpeed,
				beforeStart:	function() { this.animating = true; }.bind(this),
				afterFinish:	function() { this.animating = false; }.bind(this)
			};
		
		// do blinddown-up and set handles active status
			if(content.style.display == 'none') {
				handle.innerHTML = handle.innerHTML.replace(this.signClosed, this.signOpen);
				new Effect.BlindDown(content, opt);
			} else {
				handle.innerHTML = handle.innerHTML.replace(this.signOpen, this.signClosed);
				new Effect.BlindUp(content, opt);
			}
		
	},
	
	fetchNext: function(handle) {
		var nextContent = null;
		var loopTimeout = 50; // maximum number of loops
		var currObject = handle;
		while (nextContent == null) {
			
			// loop dom, check for right content
				var next = currObject.next('.'+this.contentName);
				if(next) nextContent = next;
				else currObject = currObject.up();
			
			// emergency exit
				if(loopTimeout <= 0) break;
				else loopTimeout++;
			
		}
		return nextContent;
	}
	
}



/*
 * SIDEBAR DRAWERS
 * 
 */

var drawers = Class.create();
drawers.prototype = {
	
	objName:			'sidebox_drawers',
	handleName: 		'sidebox_header',
	handleNameActive:	'sidebox_header_active',
	contentName:		'sidebox_content',
	contentNameOuter:	'sidebox_content_outer',
	contentTriggerOpen:	'open',
	
	animationSpeed:		.4,
	eventName:			'click',	// kan ook: mouseover
	animating:			false,
	allowAllClosed:		false,		// works only on 'click' event
	
	initialize: function() {
		if($$('.'+this.objName)) {
			$$('.'+this.objName+' .'+this.handleName).each(function(e) {
				Event.observe(e, this.eventName, function(){
					if(!this.animating && e.next(0).className.include(this.contentName)) this.toggleElement(e);
				}.bind(this));
				var nextContent = e.next().down();
				if(nextContent.className.include(this.contentTriggerOpen)) e.className = this.handleNameActive;
				else nextContent.style.marginTop = '-'+nextContent.getHeight()+'px';
			}.bind(this));
		}
	},
	
	toggleElement: function(handle) {
		var content = handle.next().down();
		if ($(content).style.marginTop <= '0') {
			$$('.'+this.objName+' .'+this.handleName, '.'+this.objName+' .'+this.handleNameActive).each(function(e) {
				if (e == handle) {
					new Effect.Morph(content, {
						duration:		this.animationSpeed,
						beforeStart:	function() { this.animating = true; }.bind(this),
						afterFinish:	function() { this.animating = false; }.bind(this),
						style:			'margin-top: 0px'
					});
					e.className = this.handleNameActive;
				} else {
					var nextContent = e.next().down();
					new Effect.Morph(nextContent, {
						duration:		this.animationSpeed,
						style:			'margin-top: -'+nextContent.getHeight()+'px;',
						afterFinish:	function(){ e.className = this.handleName; }.bind(this)
					});
				}
			}.bind(this));
		} else if(this.allowAllClosed && this.eventName == 'click') {
			new Effect.Morph(content, {
				duration:		this.animationSpeed,
				beforeStart:	function() { this.animating = true; }.bind(this),
				afterFinish:	function() { this.animating = false; handle.className = this.handleName; }.bind(this),
				style:			'margin-top: -'+content.getHeight()+'px'
			});
		}
	}
	
}



/*
 * HOMEPAGE DEMO
 * 
 */

var homepageDemo = Class.create();
homepageDemo.prototype = {
	
	objName:			'homepage_demo',
	handleName:			'homepage_handles',
	contentName:		'homepage_content',
	handleBarName:		'homepage_handle_bar',
	itemsContainer:		'discover_items',
	
	animationSpeed:		1,
	itemWidth:			960,
	itemHeight:			350,
	handleBarHeight:	87,
	scrollDirection:	'horizontal',
	
	numItems:			0,
	elements:			[],
	animating:			false,
	
	initialize: function() {
		if($(this.objName)) {
			// add list handles
				var ul = '<ul>';
				$$('.'+this.itemsContainer+' .item').each(function(e) {
					if(ul == '<ul>') ul += '<li class="first">';
					else ul += '<li>';
					ul += '<a href="#demo'+(this.numItems+1)+'" rel="'+this.numItems+'">'+e.title+'</a></li>';
					this.elements[this.numItems] = e.id;
					this.numItems++;
				}.bind(this));
				ul += '</ul>';
				if (this.numItems > 1) Element.insert($(this.handleName), ul);
				else {
					$(this.handleName).hide();
					$(this.handleBarName).hide();
				}
			
			// set max width/height
				if(this.scrollDirection == 'horizontal') $(this.contentName).style.width = (this.itemWidth * this.numItems) + 'px';
			
			// add event listener
				$$('#'+this.handleName+' li a').each(function(e) {
					Event.observe(e, 'click', function(){
						if(!this.animating) this.showElement(e.rel);
					}.bind(this));
				}.bind(this));
			
		}
	},
	
	showElement: function(num){
		if(num <= this.elements.length) {
			
			// set new style
				if(this.scrollDirection == 'horizontal') var newStyle = 'margin-left: -' + Math.round(this.itemWidth * num) + 'px';
				else var newStyle = 'margin-top: -' + Math.round(this.itemHeight * num) + 'px';
			
			// morph main images
				new Effect.Morph($(this.contentName), {
					duration: this.animationSpeed,
					beforeStart: function(){ this.animating = true; }.bind(this),
					afterFinish: function(){ this.animating = false; }.bind(this),
					style: newStyle
				});
			
			// morph sidebar handle
				var newTop = Math.round(7 + (this.handleBarHeight * num));
				new Effect.Morph($(this.handleBarName), {
					duration: this.animationSpeed,
					style: 'top: ' + newTop + 'px'
				});
			
		}
	}
	
}



/*
 * SCROLLER
 * 
 */

var scroller = Class.create();
scroller.prototype = {
	
	triggerObjName:		null,
	overflowObj:		null,
	movingObjName:		null,
	btnLeft:			null,
	btnRight:			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,
	
	minOpacity:			.4,
	
	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.nextBtn_class) this.btnRight = opt.nextBtn_class;
				if(opt.autoScroll) 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();
					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() {
		var btn = $$('.'+this.triggerObjName+' .'+this.btnLeft)[0];
		new Effect.Opacity(btn, {duration:0.3, from:Element.getOpacity(btn), to:this.minOpacity});
	},
	enableLeftBtn: function() {
		var btn = $$('.'+this.triggerObjName+' .'+this.btnLeft)[0];
		new Effect.Opacity(btn, {duration:0.3, from:Element.getOpacity(btn), to:1.0});
	},
	disableRightBtn: function() {
		var btn = $$('.'+this.triggerObjName+' .'+this.btnRight)[0];
		new Effect.Opacity(btn, {duration:0.3, from:Element.getOpacity(btn), to:this.minOpacity});
	},
	enableRightBtn: function() {
		var btn = $$('.'+this.triggerObjName+' .'+this.btnRight)[0];
		new Effect.Opacity(btn, {duration:0.3, from:Element.getOpacity(btn), to:1.0});
	},
	hasToScroll: function() {
		return (this.itemsWidth > this.visibleWidth) ? true : false;
	}

}



/*
 * PRODUCT IMAGES (add-on for the scroller)
 * 
 */

var productImages = Class.create();
productImages.prototype = {
	
	big_image_id:		null,
	scroller:			null,
		
	initialize: function(opt){
		
		// initialize options
			if(opt) {
				if(opt.big_img_id) this.big_img_id = opt.big_img_id;
				this.scroller = new scroller(opt);
			}
		
		// start event listeners
			
		
	}
	
}



/*
 * TOOLTIP
 * 
 */

var tooltip = Class.create();
tooltip.prototype = {
	
	triggerClassName:	'tooltip',		// trigger className
	tipXPadding:		-18,			// add X pixels to the left
	tipYPadding:		5,				// add X pixels to the bottom
	
	el:					null,
	elTxt:				null,
	mouseX:				null,
	mouseY:				null,
	
	eBackup:			null,
	titleBackup:		'',
	isLink:				false,
	isVisible:			false,
	
	initialize: function(opt){
		
		// create html
			var html = '';
			html += '<div id="tooltip" style="display:none;">';
			html += '<div class="tl"><div class="tr"></div></div>';
			html += '<div class="bg_l clearfix"><div class="bg_r"><div id="tooltip_content"></div></div></div>'
			html += '<div class="bl"><div class="br"></div></div>';
			html += '</div>';
			Element.insert(document.body, { bottom: html });
			this.el = $('tooltip');
			this.elTxt = $('tooltip_content');
		
		// fetch all tooltips
			$$('.'+this.triggerClassName).each(function(e) {
				
				Event.observe(e, 'mouseover', function(){
					
					// reset previous tooltip
						this.resetTooltip();
					
					// save data
						var txt = '';
						this.isLink = false;
						this.eBackup = e;
						this.titleBackup = '';
					
					// get element options
						if (e.title && !e.title.blank()) {
							txt = e.title;
							this.titleBackup = txt;
						}
						if (txt.blank() && e.href && !e.href.blank()) {
							this.isLink = true;
							txt = '<img src="' + e.href + '" alt="" />';
						}
					
					// show tooltip
						if(!txt.blank()) this.showTooltip(txt);
					
				}.bind(this));
				
				Event.observe(e, 'mouseout', function(){ this.hideTooltip(); }.bind(this));
				Event.observe(e, 'click', function(e){ if(this.isLink) e.stop(); }.bind(this));
				
			}.bind(this));
		
		// start mouse move event
			Event.observe(document, 'mousemove', function(event) { this.fetchMousePosition(event); }.bind(this));
		
	},
	showTooltip: function(txt) {
		this.eBackup.title = '';
		this.elTxt.update(txt);
		this.el.show();
		this.isVisible = true;
	},
	hideTooltip: function() {
		this.el.hide();
		this.resetTooltip();
		this.isVisible = false;
	},
	resetTooltip: function() {
		if(!this.titleBackup.blank()) this.eBackup.title = this.titleBackup;
	},
	fetchMousePosition: function(event) {
		if(this.el && this.isVisible) {
			this.mouseX = Event.pointerX(event);
			this.mouseY = Event.pointerY(event);
			this.el.style.left = (this.mouseX+this.tipXPadding)+'px';
			this.el.style.top = (this.mouseY-this.el.getHeight()-this.tipYPadding)+'px';
		}
	}
	
}



/*
 * SUMIT BUTTONS
 * changes all ugly submit buttons to nice red buttons :)
 * 
 */

var submitButtons = Class.create();
submitButtons.prototype = {
	
	triggerClassName:	'submit_btn', // trigger className
	
	initialize: function(){
		$$('input.'+this.triggerClassName).each(function(e) {
			var f = e.up('form');
			if(f && !f.name.blank()) {
				
				// get button properties
					var fName = f.name;
					var classes = e.className.replace(this.triggerClassName, 'lnk_button_s');
					var value = e.value;
				
				// add nice button
					var html = '<a href="javascript:document.'+fName+'.submit();" class="'+classes+'"><i><b>'+value+'</b></i></a>';
					Element.insert(e, { after: html });
				
				// hide element
					e.hide();
				
			}
			
		}.bind(this));
	}
	
}