// HighlightBox params	
var maxHeight = 115;
var interval = 4000; //in milliseconden
var effectSpeed = 1.0; //in seconden
var mouseDelay = 500; // in milliseconden

var Pics = new Array();
Pics[0] = "http://www.gport.nl/dev/dutchmusic/producthighlight/img/1.jpg";
Pics[1] = "http://www.gport.nl/dev/dutchmusic/producthighlight/img/4.jpg";
Pics[2] = "http://www.gport.nl/dev/dutchmusic/producthighlight/img/2.jpg"; 
Pics[3] = "http://www.gport.nl/dev/dutchmusic/producthighlight/img/4.jpg"; 
// hier moet je stoppen met kloten

var horinaja;
var previous = null;
var accordion;
var mousedElement;
var effectBusy = false;
var mouseInAccordion = false;
var	mouseInDiv = new Array();
Event.observe(window, "load", init);

var preLoad = new Array();
for (i = 0; i < Pics.length; i++) {
	preLoad[i] = new Image();
	preLoad[i].src = Pics[i];
}

function init() {
	if ($('highlightbox') != undefined) {
		initHighlightBox();
	}
	if ($('horinaja') != undefined) {
		initHorinaja();
	}
}

function initHorinaja() {
	horinaja = new Horinaja('slider', 0.3, 5, false);
	Event.observe('next', 'click', horiNext);
	Event.observe('previous', 'click', horiPrevious);
}

function firstDescendant(element) {
	element = $(element);
	var descendants = element.descendants();
	return descendants[0];
}

function childElements(element) {
	element = $(element);
	var descendants = element.descendants();
	var childs = new Array();
	
	var nr = 0;
	for(var i = 0; i < descendants.length; i++) {		
		if (descendants[i].parentNode == element) {
			childs[nr] = descendants[i];
			nr++;
		}
	}
	return childs;
}


function horiPrevious() {
	horinaja.previous();
}

function horiNext() {
	horinaja.next();
}

function initHighlightBox() {
	var closedDivs = $$('.closed');
	closedDivs.invoke('observe', 'mouseover', function() {  mouseOver(); mousedElement = this; mouseInDiv[getItemNumber(this)] = true; setTimeout('timedExpand()', mouseDelay);});	
	closedDivs.invoke('observe', 'mouseout', function() { mouseInDiv[getItemNumber(this)] = false; });
	$$('.description').invoke('hide');
	accordion = $('accordion');
	accordion.observe('mouseover', mouseOver);
	accordion.observe('mouseout', mouseOut);
	setInterval(nextItem, interval);
	expand($$('.closed')[0]);
}

function timedExpand() {								
	if (mouseInDiv[getItemNumber(mousedElement)]) {
		expand(mousedElement);
	}
}

function nextItem() {
	if (!mouseInAccordion) {
		nextElement = $$('.open')[0].nextSiblings()[0];
		if (nextElement != null) {
			expand($$('.open')[0].nextSiblings()[0]);
		} else {
			expand($$('.closed')[0]);
		}					
	}
}

function mouseOver() {
	mouseInAccordion = true;
}

function mouseOut() {
	mouseInAccordion = false;
}

function getItemNumber(element) {
	element = $(element);
	var childs = childElements(element.parentNode);
	
	nr = 0;
	for(var i=0; i < childElements.length; i++) {
		if (childs[i].className != 'clear') {
			if (childs[i] == element) {
				return nr;
			} else {
				nr++;
			}
		}
	}	
}

function openedItem() {
	var openedItem = $$('.open')[0];
	var allItems = childElements($('accordion'));
	for(var i = 0; i < allItems.length; i++) {
		if (openedItem == allItems[i]) {
			return i;
		}
	}
}

function hide(element) {
	var options = {
		scaleContent: false,					
		duration: effectSpeed,
		scaleMode: { originalHeight: maxHeight },
		beforeStart: function() { effectBusy = true; },
		afterFinish: function() { effectBusy = false; }
	};
	
	new Effect.SlideUp(element, options);				
}

function show(element) {		
	var options = {					
		scaleContent: false,										
		duration: effectSpeed,
		scaleMode: { originalHeight: maxHeight },
		beforeStart: function() { effectBusy = true; },
		afterFinish: function() { effectBusy = false; }
	};
	
	new Effect.SlideDown(element, options);				
}

function expand(element) {				
	if (previous != element && !effectBusy) {
		var title = childElements(element)[0];
		var description = childElements(element)[1];
		
		if (previous != null) {
			close(previous);
		}				
		show(description);
		toggleTitleClass(title);
		
		var imgToLoad = openedItem() - 1;
		
		if (imgToLoad < preLoad.length){			
			$('highlightbox').style.backgroundImage = 'url(' + preLoad[imgToLoad].src + ')';
		}
		
		previous = element;
	}
}

function toggleTitleClass(element) {
	element.toggleClassName('title_closed');
	element.toggleClassName('title_open');
	element.parentNode.toggleClassName('closed');
	element.parentNode.toggleClassName('open');
}

function close(element) {
	var title = childElements(element)[0];
	var description = childElements(element)[1];				
	hide(description);
	toggleTitleClass(title);
}

/*
Cette création est mise à disposition selon le Contrat Paternité-Partage des Conditions Initiales à l'Identique 3.0 Unported disponible en ligne http://creativecommons.org/licenses/by-sa/3.0/ ou par courrier postal à Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
*/
/* extension prototype */
Object.extend(Event, {
        wheel:function (event){
        var delta = 0;
        if (event.wheelDelta) {
			delta = event.wheelDelta/120;
			if (window.opera) delta = -delta;
        } else if (event.detail) {
            delta = -event.detail/3;
        }
		if(navigator.userAgent.indexOf('Mac') != -1) delta = -delta; 	 
		return Math.round(delta);
	}
});
var Horinaja = Class.create();
Horinaja.prototype = {
	initialize: function(capture, duree, secExecution, pagination){
		this.capture = capture;
		this.duree = duree;
		this.secExecution = secExecution;
		this.pagination = pagination;
		this.nCell = 0;
		this.id = 1;
		this.po = 0;	
		this.f = $$('div#'+this.capture+' ul li');
		this.px = $(this.capture).getWidth();
		this.pxH = $(this.capture).getHeight();
		this.start();
	},
	start: function(){		
				this.mover = firstDescendant($(this.capture));	
				this.nCell = this.f.length;	
				for(i=0;i!=this.nCell;i++){
					this.f[i].setStyle({
					  width: this.px+'px',
					  height: (this.pxH-40)+'px',
					  float: 'left'
					  });	
				}
				$(this.capture).setStyle({
					overflow:'hidden',
					position: 'relative'
					});
				
				firstDescendant($(this.capture)).setStyle({
					width:(this.px*this.nCell)+'px'
					});	
				if(this.pagination){
						$(this.capture).insert({bottom:'<ol class="horinaja_pagination"></ol>'});
						this.olPagination  = firstDescendant($(this.capture)).next();
						$(this.olPagination).setStyle({
							width: this.px+'px'
							});
						this.wb = Math.floor(this.px/this.f.length);
						for(i=1;i!=(this.f.length+1);i++){
							$(this.olPagination).insert({bottom:'<li><a style="width:'+this.wb+'px;">'+i+'</a></li>'});
							if(i!=this.id){
								childElements($(this.olPagination))[i-1].setStyle({
									opacity:0.2
									});					
							}
						}
						childElements($(this.olPagination))[0].setStyle({
							opacity:1
						});	
						this.startOC();
				}
				this.startPe();
				//Event.observe($(this.capture),"mouseout", this.startPe.bind(this));
				//Event.observe($(this.capture),"mouseover", this.stopPe.bind(this));								
				//Event.observe($(this.capture), "mousewheel", this.wheelwheel.bind(this));		
				//Event.observe($(this.capture), "DOMMouseScroll", this.wheelwheel.bind(this));				
	},
	startOC: function(){
	Event.observe($(this.olPagination),"click", this.moveP.bind(this));
	},
	startPe: function(){
	this.periodik = new PeriodicalExecuter(this.Pe.bind(this),this.secExecution);	
	},
	stopPe: function(){
	this.periodik.stop();
	},
	effaceP: function(mop){
		this.mop = mop;
		if(this.pagination)
		new Effect.Fade(childElements($(this.olPagination))[this.mop-1],{duration:0.3,to:0.2})
	},
	move: function(xp){
		this.xp = xp;
		new Effect.Move(this.mover, { 
					x: this.xp, 
					y: 0,
					mode:'absolute',
					duration: this.duree,
					transition: Effect.Transitions.sinoidal
				});
				if(this.pagination){
					new Effect.Appear(childElements($(this.olPagination))[this.id-1],{duration:0.3,to:1})
				}	
	},	
	Pe: function(){
					if(this.id<this.nCell){
							this.po=this.po-this.px;
							this.effaceP(this.id);
							this.id=this.id+1;
							this.move(this.po);
						}else{
							this.po=0;
							this.effaceP(this.id);
							this.id=1;
							this.move(this.po);
						}
	},
	moveP: function(evt){
		var child = Event.element(evt);
		this.occ = parseInt(child.innerHTML);
		if(this.id>this.occ){
			this.diff= this.id-this.occ;
			this.po=this.po+(this.px*this.diff);
			this.effaceP(this.id);
			this.id=this.occ;
			this.move(this.po);
		}else if(this.id<this.occ){
			this.diff= this.occ-this.id;
			this.po=this.po-(this.px*this.diff);
			this.effaceP(this.id);
			this.id=this.occ;
			this.move(this.po);
		}
	},
	stopEvent:function(pE)
	{
	   if (!pE)
		 if (window.event)
		   pE = window.event;
		 else
		   return;
	  if (pE.cancelBubble != null)
		 pE.cancelBubble = true;
	  if (pE.stopPropagation)
		 pE.stopPropagation();
	  if (pE.preventDefault)
		 pE.preventDefault();
	} ,
	wheelwheel: function(e){
						this.event = e;
						this.stopPe();
						this.stopEvent(e);
						if (Event.wheel(this.event) < 0){
							if(this.id<this.nCell){
									this.po=this.po-this.px;
									this.effaceP(this.id);
									this.id=this.id+1;
									this.move(this.po);
								}
						}else{
							if(this.id!=1){
									this.po=this.po+this.px;
									this.effaceP(this.id);
									this.id=this.id-1;
									this.move(this.po);
								}
						}
	} ,
	next: function(){
		this.stopPe();		
		if(this.id<this.nCell){
			this.po=this.po-this.px;
			this.effaceP(this.id);
			this.id=this.id+1;
			this.move(this.po);
		}
		this.startPe();
	} ,
	previous: function(){
		this.stopPe();
		if(this.id!=1){
			this.po=this.po+this.px;
			this.effaceP(this.id);
			this.id=this.id-1;
			this.move(this.po);
		}
		this.startPe();
	}
};