/* 
 * 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();
		//var tbs = new tabsection();
		//var flt = new filter();
		//var fcf = new focusFields();
		//var qck = new quickSelector();
	
	// PRODUCT SCROLLER WITH IMAGES: PRODUCT DETAIL PAGE

	
});



/*
 * 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:		true,		// works only on 'click' event
	
	initialize: function() {
		if($$('.'+this.objName)) {
			$$('.'+this.objName+' .'+this.handleName).each(function(e) {
				
				// add event listener
					Event.observe(e, this.eventName, function(){
						if(!this.animating && e.next(0).className.include(this.contentName)) this.toggleElement(e);
					}.bind(this));
				
				// check for open content
					var nextContent = e.next().down();
					if (nextContent.className.include(this.contentTriggerOpen)) {
						e.className = this.handleNameActive;
						nextContent.style.marginTop = '0px';
					} 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',
	objContentName:		'homepage_demo_content',
	objItemsName:		'homepage_demo_items',
	
	oneItemClass:		'item',
	oneItemBlackClass:	'black',
	
	menuName:			'homepage_menu',
	handleName:			'homepage_handle',
	whiteBgName:		'homepage_menu_white',
	blackBgName:		'homepage_menu_black',
	listName:			'homepage_list',
	
	selectedClass:		'sel',
	blackMenuClass:		'blackmenu',
	
	autoPlay:			true,
	autoPlaySeconds:	20,
	autoPlayIv:			null,
	autoCurrent:		0,
	linkArray:			[],
	
	animationSpeed:		1,
	itemWidth:			970,
	itemHeight:			350,
	handleBarHeight:	87,
	handleBarTop:		0,
	scrollDirection:	'horizontal',
	currMenu:			'white',
	
	numItems:			0,
	elements:			[],
	animating:			false,
	
	initialize: function() {
		if($(this.objName)) {
			
			// create ul-menu
				var html = '<div id="'+this.menuName+'">';
				html += '<div id="'+this.handleName+'"></div>';
				html += '<div id="'+this.whiteBgName+'"></div>';
				html += '<div id="'+this.blackBgName+'" style="display:none;"></div>';
				html += '<ul id="'+this.listName+'">';
				var firstTime = true;
				var firstBlack = false;
			
			// loop items
				$$('#'+this.objItemsName+' .'+this.oneItemClass).each(function(e) {
					
					// start list
						html += (firstTime) ? '<li class="first">' : '<li>';
					
					// set class (first + black)
						var className = (firstTime) ? this.selectedClass : '';
						if (e.hasClassName(this.oneItemBlackClass)) {
							className += ' ' + this.oneItemBlackClass;
							if(firstTime) firstBlack = true;
						}
					
					// create link
						html += '<a href="#demo'+(this.numItems+1)+'" class="'+className+'" rel="'+this.numItems+'">'+e.title+'</a></li>';
						this.elements[this.numItems] = e.id;
						e.title = ''; // remove title
					
					// add numItems
						this.numItems++;
						firstTime = false;
					
				}.bind(this));
			
			// close ul-menu
				html += '</ul></div>';
			
			// insert html and set styles
				if (this.numItems > 1) Element.insert($(this.objContentName), { top: html });
				if(this.scrollDirection == 'horizontal') $(this.objItemsName).style.width = (this.itemWidth * this.numItems) + 'px';
				if (firstBlack) {
					$(this.listName).addClassName(this.blackMenuClass);
					$(this.blackBgName).show();
					$(this.whiteBgName).hide();
				}
			
			// fetch url hash
				var hash = this.fetchUrlHash();
				var startWith = false;
			
			// loop links
				$$('#'+this.objContentName+' li a').each(function(e) {
					
					// add to link array
						this.linkArray[e.rel] = e;
					
					// add event listener
						Event.observe(e, 'click', function(ev){
							if(!this.animating) this.showElement(e, e.rel);
							ev.stop();
							clearInterval(this.autoPlayIv);
						}.bind(this));
						
					// check hash
						if(hash && hash == e.href.split('#')[1]) startWith = e;
					
				}.bind(this));
				
			// start with given url hash
				this.showElement(startWith, startWith.rel);
				if(this.autoPlay) {
					this.autoPlayIv = setInterval(function() { this.nextElement(); }.bind(this), (this.autoPlaySeconds*1000));
					if(startWith) this.autoCurrent = startWith.rel;
				}
			
		}
	},
	
	nextElement: function() {
		this.autoCurrent++;
		if(this.autoCurrent >= this.linkArray.length) this.autoCurrent = 0;
		var e = $$('#'+this.objContentName+' li a')[this.autoCurrent];
		if(e && !this.animating) this.showElement(e, e.rel);
	},
	
	showElement: function(aLink, num){
		if(num <= this.elements.length) {
			
			// switch to black
				if(aLink.hasClassName(this.oneItemBlackClass)) this.showBlackBg();
				else this.showWhiteBg();
			
			// disable flash elements if there are any
				//var swfobj = swfobject.getObjectById("myId");
				//if(swfobj) swfobj.stopAllSounds();
			
			// 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.objItemsName), {
					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(this.handleBarTop + (this.handleBarHeight * num));
				var newHeight = (num == 3) ? this.handleBarHeight+2 : this.handleBarHeight;
				new Effect.Morph($(this.handleName), {
					duration: this.animationSpeed,
					style: 'top: ' + newTop + 'px; height: ' + newHeight + 'px;'
				});
			
			// set handles active-inactive state
				$$('#'+this.menuName+' li a').each(function(e) { e.removeClassName(this.selectedClass); }.bind(this));
				aLink.addClassName(this.selectedClass);
			
		}
	},
	
	showBlackBg: function() {
		if(this.currMenu != 'black') {
			
			// set black links
				$(this.listName).addClassName(this.blackMenuClass);
				
			// switch bgs
				new Effect.Appear(this.blackBgName);
				new Effect.Fade(this.whiteBgName);
			
			// set currMenu
				this.currMenu = 'black';
			
		}
	},
	
	showWhiteBg: function() {
		if(this.currMenu != 'white') {
			
			// switch bgs
				new Effect.Appear(this.whiteBgName, {
					afterFinish: function() { $(this.listName).removeClassName(this.blackMenuClass); }.bind(this)
				});
				new Effect.Fade(this.blackBgName);
			
			// set currMenu
				this.currMenu = 'white';
			
		}
	},
	
	fetchUrlHash: function() {
		var h = self.document.location.hash.substring(1);
		return (h) ? h : false;
	}
	
}

/*
 * extra funcs
 * 
 */

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