var Sisi = {};

window.addEvent('domready', function()
{	
	$$('.slideshow').each(function(el, i)
	{
		new Sisi.Slideshow(
		{
			wrapper: el,
			slider: el.getElement('ul'),
			elements: el.getElements('ul li'),
			buttons: $$('.navbuttons a'),
			otherButtons: $$('ul.otherbuttons li a')
		});
	});
	
	
	$$('#footer .wrapper .ikb').addEvent('mouseover', function() {
		$$('div.tooltip').setStyle('display','block');										  
	});
	
	$$('#footer .wrapper .ikb').addEvent('mouseleave', function() {
		$$('div.tooltip').setStyle('display','none');										  
	});
	
	$$('a.product-visual').addEvent('mouseover', function() {
		this.addClass('hover');										  
	});
	
	$$('a.product-visual').addEvent('mouseleave', function() {
		this.removeClass('hover');							  
	});
	
	
	/* Slides */
	if($$('.slide'))
	{
		var yourSlides = $$('.slide');
		var togslide = $$('.tog');	
		
		togslide.each(function(el, i){
							
			el.slider = new Fx.Slide( yourSlides[i],{
				onStart:function(){}
			});
	
			el.slider.hide();
			
			el.addEvent('click', function(){
				this.slider.toggle();
			});
		});
	}
	
});

function expandDiv()
{
	var changeHeight = new Fx.Morph('tool', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
	changeHeight.start({
		'height': ['550','1050']
	});
}

function openLightbox(int)
{
	if(int == 1)
	{
		Mediabox.open('overlayers/suiker.html', '', '720 600');
	}
	else if(int == 2)
	{
		Mediabox.open('overlayers/suiker.html', '', '720 600');
	}
	else if(int == 'quality_mark')
	{
		//Mediabox.open('overlayers/ikkiesbewust.html','','700 600');
	}
	else
	{
		Mediabox.open('overlayers/suiker.html', '', '720 600');
	}
}


Sisi.Slideshow = new Class(
{
	options: {
		wrapper: null,
		slider: null,
		elements: null,
		buttons: null,
		otherButtons: null,
		numberOfItems: null,
		activeElement: 0,
		slideFx: null
	},
	Implements: Options,
	
	initialize: function(options)
	{
		this.setOptions(options);
		this.options.numberOfItems = this.options.elements.length;
		
		this.options.slideFx = new Fx.Scroll(this.options.wrapper, { link: 'cancel' });
		
		this.addClickEvents();
		
		this.setOtherButtons();
	},
	
	addClickEvents: function()
	{
		this.options.buttons.each(function(el)
		{
			el.addEvent('click', function(e)
			{
				e.stop();
				if (el.hasClass('prev'))
				{
					--this.options.activeElement;
					if (this.options.activeElement < 0)
					{
						this.options.activeElement = this.options.numberOfItems - 1;
					}
				}
				else if (el.hasClass('next'))
				{
					++this.options.activeElement;
					if (this.options.activeElement >= this.options.numberOfItems)
					{
						this.options.activeElement = 0;
					}
				}
				this.slide();
			
				if(this.options.activeElement == 0)
				{
					$$('a.product-visual').removeClass('active');
					$$('a.product-limo').addClass('active');
				}
				else if(this.options.activeElement == 1)
				{
					$$('a.product-visual').removeClass('active');
					$$('a.product-fruitmania').addClass('active');
				}
				else if(this.options.activeElement == 2)
				{
					$$('a.product-visual').removeClass('active');
					$$('a.product-fruitwater').addClass('active');
				}
				else if(this.options.activeElement == 3)
				{
					$$('a.product-visual').removeClass('active');
					$$('a.product-sinas').addClass('active');
				}
				else if(this.options.activeElement == 4)
				{
					$$('a.product-visual').removeClass('active');
					$$('a.product-nobubbles').addClass('active');
				}
				
			}.bind(this));
		}.bind(this));
	},
	
	setOtherButtons: function()
	{
		this.options.otherButtons.each(function(button, i)
		{
			button.addEvent('click', function(e)
			{
				$$('a.product-visual').removeClass('active');
				button.addClass('active');
				e.stop();
				this.options.activeElement = button.get('rel');
				this.slide();
			}.bind(this));
		}.bind(this));
	},
	
	slide: function()
	{
		this.options.slideFx.toElement(this.options.elements[this.options.activeElement]);
	}
});


// Element Implements
Element.implement(
{
	hasEvent: function(eventType,fn)
	{
		var myEvents = this.retrieve('events');
		return myEvents && myEvents[eventType] && (fn == undefined || myEvents[eventType].keys.contains(fn));
	},
	show: function()
	{
		this.setStyle('display','block');
	},
	inline: function()
	{
		this.setStyle('display','inline');
	},
	hide: function()
	{
		this.setStyle('display','none');
	}
});

var TabSet = new Class({
	options: {
		activeClass: 'active', //css class
		cookieName: '',
		cookieOptions: {
			duration: 30, //30 days
			path: '/'
		},
		startIndex: 0 //start with this item if no cookie or active
	},
	Implements: [Options,Events],
	initialize: function(tabs,contents,options) {
		//handle arguments
		this.setOptions(options);
		this.tabs = $$(tabs);
		this.contents = $$(contents);
		//determine the "active" tab
		var active = (Cookie.read(this.options.cookieName) || this.options.startIndex);
		this.activeTab = this.tabs[active].addClass(this.options.activeClass);
		this.activeContent = this.contents[active].setStyle('height','auto');
		//process each tab and content
		this.tabs.each(function(tab,i) {
			this.processItem(tab,this.contents[i],i);
		},this);
		//tabs are ready -- load it!
		this.fireEvent('load');
	},
	processItem:function(tab,content,i) {
		var contentHeight = content.getScrollSize().y;
		//add a click event to the tab
		tab.addEvent('click',function(e) {
			//stop!
			if(e) e.stop();
			//if it's not the active tab
			if(tab != this.activeTab) {
				//remove the active class from the active tab
				this.activeTab.removeClass(this.options.activeClass);
				//make the clicked tab the active tab
				(this.activeTab = tab).addClass(this.options.activeClass);
				//tween the old tab content up
				//tween the new content down
				this.activeContent.set('tween',{
					onComplete:function() {
						this.activeContent = content.fade('in').set('tween',{ onComplete: $empty }).tween('height',contentHeight);
						//fire the tab change event
						this.fireEvent('change',[tab,content]);
					}.bind(this)
				}).setStyles({
					height: contentHeight,
					overflow: 'hidden'
				}).fade('out').tween('height',0);
				//save the index to cookie
				if(this.options.cookieName) Cookie.write(this.options.cookieName,i,this.options.cookieOptions);
			}
		}.bind(this));
	}
});