/* 
 * 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();
	
	// 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
				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:		8,							// 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
				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:				false,						// enable/disable auto scrolling  [default: true]
				autoScrollTimer:		8,							// 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_id1:			'product_visual1',			// id name of the first big visual
				big_image_id2:			'product_visual2',			// id name of the second big visual
				download_id:			'download_visual',			// id name of the 'download' link
				view_large_id:			'view_large_visual',		// id name of the 'view-large' link
				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
				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:				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:			4							// 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;
		}
	}
	
};



/*
 * 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){
							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));
	}
	
};



/*
 * 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;
	}
	
}



/*
 * 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;
	}

};



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

var productImages = Class.create();
productImages.prototype = {
	
	big_image_id1:		null,
	big_image_id2:		null,
	scroller:			null,
	download_link:		null,
	view_large_link:	null,
	
	disabledPClass:		'noLine',
	selectedClassName:	'selected',
	
	currImg:			1,
	animating:			false,
		
	initialize: function(opt){
		
		// initialize options
			if(opt) {
				if(opt.big_image_id1) this.big_image_id1 = opt.big_image_id1;
				if(opt.big_image_id2) this.big_image_id2 = opt.big_image_id2;
				this.scroller = new scroller(opt);
				if($(opt.download_id)) this.download_link = opt.download_id;
				if($(opt.view_large_id)) this.view_large_link = opt.view_large_id;
			}
		
		// check number of items
			if(this.scroller.numItems < 2) {
				if(this.view_large_link && $(this.view_large_link).up())
					$(this.view_large_link).up().addClassName(this.disabledPClass);
			}
		
		// start event listener
			if($(this.big_image_id1) && $(this.big_image_id2)) {
			
				var firstTime = true;
				$$('.'+this.scroller.triggerObjName+' #'+this.scroller.movingObjName+' li a').each(function(e) {
					Event.observe(e, 'click', function(ev) {
						this.showBigImg(e);
						ev.stop();
					}.bind(this));
					if(firstTime) e.addClassName(this.selectedClassName);
					firstTime = false;
				}.bind(this));
				$(this.big_image_id2).hide();
	
	
	
				Event.observe(this.view_large_link, 'click', function(ev) {
					//var newwindow = window.open($(this.view_large_link).href, 'popup', 'height=260,width=630');
					//var newwindow = window.open($(this.view_large_link).href, 'popup', 'location=no,status=no,menubar=yes,scrollbars=yes,resizable=yes,width=1000');
					
					/*  width & height popup ahv title attribute view large link
					    --------------------------------------------------------
					*/   
					var winWidth  = $(this.view_large_link).title.split('x')[0];
					var winHeight = $(this.view_large_link).title.split('x')[1];
					
					if (winWidth==null||winWidth=="0"||winWidth=="null") {
						winWidth = "500";
					} else {
						winWidth = String(Number(winWidth) + 30);
					}

					if (winHeight==null||winWidth=="0"||winHeight=="null") {
						winHeight = "300";
					} else {
						winHeight = String(Number(winHeight) + 30);
					}
										
					//alert("w: " + winWidth + "\n h: " + winHeight );
					var newwindow = window.open($(this.view_large_link).href, 'popup', 'location=no,status=no,menubar=yes,scrollbars=yes,resizable=yes,width='+winWidth+',height='+winHeight);
					
					
					
					if(window.focus) newwindow.focus();
					ev.stop();
				}.bind(this));
			
			}
		
	},
	
	showBigImg: function(e) {
		
		if (!this.animating) {
			
			// set options
				var opt = {
					beforeStart: function(){ this.animating = true }.bind(this),
					afterFinish: function(){ this.animating = false }.bind(this)
				};
			
			// swap big image
				if (this.currImg == 1) {
					$(this.big_image_id2).innerHTML = '<img src="' + e.href + '" alt="" />';
					new Effect.Fade(this.big_image_id1, opt);
					new Effect.Appear(this.big_image_id2);
					this.currImg = 2;
				} else {
					$(this.big_image_id1).innerHTML = '<img src="' + e.href + '" alt="" />';
					new Effect.Fade(this.big_image_id2, opt);
					new Effect.Appear(this.big_image_id1);
					this.currImg = 1;
				}
			
			// set download-view-large links
				var images = e.rel.evalJSON();
				$(this.download_link).href = images.download;
				$(this.view_large_link).href = images.large;
			    $(this.view_large_link).title = images.dimensions;
			
			// set selected state
				$$('.'+this.scroller.triggerObjName+' #'+this.scroller.movingObjName+' li a').each(function(currA) {
					if(e == currA) currA.addClassName(this.selectedClassName);
					else currA.removeClassName(this.selectedClassName);
				}.bind(this));
			
		}
	}
	
};



/*
 * TOOLTIP
 * 
 */

var tooltip = Class.create();
tooltip.prototype = {
	
	triggerClassName:	'tooltip',		// trigger className
	tipPosition:		'bottomleft',	// tooltip position (topleft, topright, bottomleft, bottomright)
	tipXPadding:		-18,			// move X pixels (from tipPosition)
	tipYPadding:		5,				// move Y pixels (from tipPosition)
	
	el:					null,
	elTxt:				null,
	mouseX:				null,
	mouseY:				null,
	
	eBackup:			null,
	titleBackup:		'',
	isLink:				false,
	isVisible:			false,
	hasToHide:			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(ev){ if(this.isLink) ev.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;
		this.hasToHide = false;
	},
	hideTooltip: function() {
		this.hasToHide = true;
		setTimeout(function() {
			if (this.hasToHide) {
				this.el.hide();
				this.resetTooltip();
				this.isVisible = false;
			}
		}.bind(this), 100);
	},
	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.getTipPosition('x')+'px';
			this.el.style.top = this.getTipPosition('y')+'px';
		}
	},
	getTipPosition: function(xy) {
		var elW = this.el.getWidth();
		var elH = this.el.getHeight();
		if(this.tipPosition == 'topleft') {
			return (xy == 'x') ? this.mouseX+this.tipXPadding : this.mouseY-this.tipYPadding;
		} else if (this.tipPosition == 'topright') {
			return (xy == 'x') ? this.mouseX-elW-this.tipXPadding : this.mouseY-this.tipYPadding;
		} else if(this.tipPosition == 'bottomleft') {
			return (xy == 'x') ? this.mouseX+this.tipXPadding : this.mouseY-elH-this.tipYPadding;
		} else if(this.tipPosition == 'bottomright') {
			return (xy == 'x') ? this.mouseX-elW-this.tipXPadding : this.mouseY-elH-this.tipYPadding;
		}
	}
	
};



/*
 * 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));
	}
	
};



/*
 * FILTER
 * 
 */

var filter = Class.create();
filter.prototype = {
	
	splitter:			'|',
	triggerClassName:	'filter',
	triggerFilterID:	'filterMe',
	
	currName:			'',
	triggerType:		'',
	filters:			['all'],
	
	cookieName:			'pioneerFilter',
	cookieExpTime:		30*60*1000, // 30 minutes
	
	initialize: function() {
		if($(this.triggerFilterID) && !$(this.triggerFilterID).title.blank()) {
			
			// get unique id
				this.currName = $(this.triggerFilterID).title;
			    $(this.triggerFilterID).title = '';
				
			// check cookie
				var cookieContent = this.getCookie(this.cookieName+'_'+this.currName);
				if(cookieContent) this.filters = cookieContent.split(',');
			
			// get url hash
				var h = this.fetchUrlHash();
				if(h) this.filters = h.split(',');
			
			// loop all triggers
				$$('input.'+this.triggerClassName).each(function(e) {
					if(this.triggerType.blank()) this.triggerType = e.type;
					Event.observe(e, 'click', function() { this.toggleKeyword(e.title); }.bind(this));
					if(this.filters.in_array(e.title) >= 0) e.checked = 'checked';
				}.bind(this));
			
			// first init filter
				this.doFilter();
			
		}
	},
	
	toggleKeyword: function(keyword) {
		if (this.triggerType == 'radio') {
			this.filters = new Array(keyword);
		} else {
			if (this.filters.in_array(keyword) >= 0) this.filters = this.filters.without(keyword);
			else this.filters.push(keyword);
		} 
		this.setCookie(this.cookieName+'_'+this.currName, this.filters.join());
		this.doFilter();
	},
	
	doFilter: function() {
		
		if (this.filters.indexOf('all') == -1) {
			
			// hide all divs
				$$('#'+this.triggerFilterID+' div.'+this.triggerClassName).each(function(e) { e.hide(); });
			
			// show all triggered divs
				$$(this.filters.each(function(keyword) {
					$$('#'+this.triggerFilterID+' div[title*="'+keyword+'"]').each(function(e) { e.show(); });
				}.bind(this)));
			
		} else {
			
			// show all divs
				$$('#' + this.triggerFilterID + ' div.'+this.triggerClassName).each(function(e){ e.show(); });
			
		}
	},
	
	setCookie: function(name, value) {
		var date = new Date();
		date.setTime(date.getTime()+this.cookieExpTime);
		var gmtDate = date.toGMTString();
		document.cookie = name+"="+value+"; expires="+gmtDate+"; path=/";
	},
	
	getCookie: function(name) {
		var cookieNameEq = name+"=";
		var cs = document.cookie.split('; ');
		for(var i=0; i<cs.length; i++) {
			var c = cs[i];
			while(c.charAt(0) == ' ') c = c.substring(1, c.length);
			if(c.indexOf(cookieNameEq) == 0) return c.substring(cookieNameEq.length, c.length);
		}
		return null;
	},
	
	fetchUrlHash: function() {
		var h = self.document.location.hash.substring(1);
		return (h) ? h : false;
	}
	
};



/*
 * FOCUS FIELDS
 * deletes fields content on focus
 * recover content on blur
 * 
 */

var focusFields = Class.create();
focusFields.prototype = {
	
	triggerClassName:	'focusField',
	
	initialize: function(){
		$$('.'+this.triggerClassName).each(function(e) {
			
			// add rel value
				e.rel = e.value;
			
			// add event listeners
				Event.observe(e, 'focus', function() { this.toggleContent(e); }.bind(this));
				Event.observe(e, 'blur', function() { this.toggleContent(e); }.bind(this));
			
		}.bind(this));
	},
	
	toggleContent: function(field) {
		if(field.value.blank()) field.value = field.rel;
		else if(field.value == field.rel) field.value = '';
	}
	
};



/*
 * QUICK SELECTOR
 * 
 */

var quickSelector = Class.create();
quickSelector.prototype = {
	
	triggerID:			'quickselector',
	menuID:				'quickselector_menu',
	listID:				'quickselector_list',
	menuInnerID:		'quickselector_menu_inner',
	listInnerID:		'quickselector_list_inner',
	
	menu_up_btnID:		'quickselector_menu_up',
	menu_down_btnID:	'quickselector_menu_down',
	
	list_up_btnID:		'quickselector_list_up',
	list_down_btnID:	'quickselector_list_down',
	list_back_btnID:	'quickselector_back',
	list_all_btnID:		'quickselector_viewall',
	
	loadingClass:		'loading',
	disabledClass:		'disabled',
	
	ajaxPageUrl:		'/ajax/quickselector',
	
	moveDuration:		.8,			// speed in seconds for the sideways-move
	maxMenuItems:		8,			// show scrollers when more than ... items
	maxMenuHeight:		195,		// maximum height for the inner menu scroller
	maxListHeight:		175,		// maximum height for the inner list scroller
	
	menuWidth:			null,
	el:					null,
	
	scrollMenu:			null,
	scrollDir:			null,
	scrollIV:			null,
	scrollSpeed:		40,			// interval speed (ms)
	scrollMoveSpeed:	7,			// move by * pixels
	
	animating:			false,
	loading:			false,
	
	initialize: function() {
		if($(this.triggerID)) {
			
			// start vars
				this.menuWidth = $(this.menuID).getWidth();
				this.el = $(this.triggerID);
			
			// scroll menu?
				var numMenuItems = $$('#'+this.menuInnerID+' ul li').size();
				if(numMenuItems > this.maxMenuItems) {
					
					// add up-down buttons
						var btnUp = '<div class="btm_border"><a href="#" id="'+this.menu_up_btnID+'" class="'+this.disabledClass+'"></a></div>';
						var btnDown = '<div class="top_border"><a href="#" id="'+this.menu_down_btnID+'"></a></div>';
						Element.insert(this.menuInnerID, { before: btnUp });
						Element.insert(this.menuInnerID, { after: btnDown });
					
					// set max height of inner menu
						$(this.menuInnerID).style.height = this.maxMenuHeight+'px';
					
					// add up buttons event listeners
						Event.observe(this.menu_up_btnID, 'mouseover', function(ev) { this.startScroll('menu', 'up'); ev.stop(); }.bind(this));
						Event.observe(this.menu_up_btnID, 'mouseout', function(ev) { this.stopScroll(); ev.stop(); }.bind(this));
						Event.observe(this.menu_up_btnID, 'click', function(ev) { ev.stop(); }.bind(this));
					
					// add down buttons event listeners	
						Event.observe(this.menu_down_btnID, 'mouseover', function(ev) { this.startScroll('menu', 'down'); ev.stop(); }.bind(this));
						Event.observe(this.menu_down_btnID, 'mouseout', function(ev) { this.stopScroll(); ev.stop(); }.bind(this));
						Event.observe(this.menu_down_btnID, 'click', function(ev) { ev.stop(); }.bind(this));
					
				}
			
			// add event listeners
				$$('#'+this.menuInnerID+' ul li a').each(function(e){
					Event.observe(e, 'click', function(ev) { this.getList(e); ev.stop(); }.bind(this));
				}.bind(this));
				Event.observe($(this.list_back_btnID), 'click', function(ev) { this.showMenu(); ev.stop(); }.bind(this));
			
		}
	},
	
	getList: function(e) {
		
		if (!this.animating && !this.loading) {
			
			// add loader
				e.addClassName(this.loadingClass);
				this.loading = true;
			
			// get parameters (taxLevel1, taxLevel2, category_id, language_id, country_id)
				var data = e.name;
			
			// do ajax call
				new Ajax.Request(this.ajaxPageUrl, {
					method: 'post',
					postBody: 'data=' + data,
					onSuccess: function(t) {
						
						// set href for quickselector_viewall
							var result = t.responseText.split("-@-");
							$(this.list_all_btnID).href = result[0];
						
						// set content and change link
							$(this.listInnerID).innerHTML = result[1];
										
						// add buttons if needed					
							if (!$(this.list_up_btnID)) {
								
								// add up-down buttons
									var btnUp = '<div class="btm_border"><a href="#" id="' + this.list_up_btnID + '" class="'+this.disabledClass+'"></a></div>';
									var btnDown = '<div class="top_border"><a href="#" id="' + this.list_down_btnID + '"></a></div>';
									Element.insert(this.listInnerID, { before: btnUp });
									Element.insert(this.listInnerID, { after: btnDown });
								
								// set max height of inner menu
									$(this.listInnerID).style.height = this.maxListHeight + 'px';
								
								// add up buttons event listeners
									Event.observe(this.list_up_btnID, 'mouseover', function(ev){ this.startScroll('list', 'up'); ev.stop(); }.bind(this));
									Event.observe(this.list_up_btnID, 'mouseout', function(ev) { this.stopScroll(); ev.stop(); }.bind(this));
									Event.observe(this.list_up_btnID, 'click', function(ev) { ev.stop(); }.bind(this));
								
								// add down buttons event listeners	
									Event.observe(this.list_down_btnID, 'mouseover', function(ev){ this.startScroll('list', 'down'); ev.stop(); }.bind(this));
									Event.observe(this.list_down_btnID, 'mouseout', function(ev) { this.stopScroll(); ev.stop(); }.bind(this));
									Event.observe(this.list_down_btnID, 'click', function(ev) { ev.stop(); }.bind(this));
								
							}
						
						// hide loader and show list
							this.loading = false;
							e.removeClassName(this.loadingClass);
							this.showList();
						
					}.bind(this)
				});
		
		}
		
	},
	
	startScroll: function(menu, direction) {
		
		// clear previous scroller
			clearInterval(this.scrollIV);
		
		// set menu-list vars
			this.scrollDir = direction;
			if(menu == 'menu') {
				this.scrollMenu = $$('#'+this.menuInnerID+' ul')[0];
				var btnUp = this.menu_up_btnID;
				var btnDown = this.menu_down_btnID;
				var maxY = this.maxMenuHeight-this.scrollMenu.getHeight();
			} else {
				this.scrollMenu = $$('#'+this.listInnerID+' ul')[0];
				var btnUp = this.list_up_btnID;
				var btnDown = this.list_down_btnID;
				var maxY = this.maxListHeight-this.scrollMenu.getHeight();
			}
		
		// start interval, start scrolling
			this.scrollIV = setInterval(function() {
				
				// get current position
					var currY = this.scrollMenu.style.marginTop.replace('px', '');
					if(!currY) currY = 0;
				
				// set new position
					var dir = (this.scrollDir == 'up') ? this.scrollMoveSpeed : 0-this.scrollMoveSpeed;
					var newY = parseFloat(currY)+parseFloat(dir);
				
				// check min-max limits
					if (newY < maxY) this.disableBtn(btnDown);
					else if (newY > 0) this.disableBtn(btnUp);
					else {
						this.enableBtn(btnUp);
						this.enableBtn(btnDown);
						this.scrollMenu.style.marginTop = newY + 'px';
					}
				
			}.bind(this), this.scrollSpeed);
		
	},
	
	stopScroll: function() {
		clearInterval(this.scrollIV);
	},
	
	enableBtn: function(id) {
		$(id).removeClassName(this.disabledClass);
	},
	
	disableBtn: function(id) {
		$(id).addClassName(this.disabledClass);
	},
	
	showList: function(content) { // scroll right
		if (!this.animating) {
			new Effect.Morph(this.el, {
				duration: this.moveDuration,
				beforeStart: function(){ this.animating = true; }.bind(this),
				afterFinish: function(){ this.animating = false; }.bind(this),
				style: 'margin-left: -' + this.menuWidth + 'px'
			});
		}
	},
	
	showMenu: function() { // scroll left
		if (!this.animating) {
			new Effect.Morph(this.el, {
				duration: this.moveDuration,
				beforeStart: function(){ this.animating = true; }.bind(this),
				afterFinish: function(){
					this.animating = false;
					$(this.listInnerID).innerHTML = '';
				}.bind(this),
				style: 'margin-left: 0px'
			});
		}
	}
	
};






/*
 * extra funcs
 * 
 */

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