/**
 *	SHOWCASE.JS
 *
 *	Date: April 19, 2008
 *	Author: 56k
 *
 *	Description:
 *	- Functions for the showcase page
 */

//-------------------------------------------------------------------------------

var showcase = Class.create({
	
	create: function () {
		
		this.data = showcaseObject; 	// Reference too global
		
		// Set Vars
		this.active = 0;
		this.itemCount = Math.round( ( this.data.length + 1 ) / 3 );
		
		// Create DOM -- First 3 items
		for(i = 0, counter = 3, containerID = 0; i < this.data.length; i++, counter++) {
			
			if(counter == 3) {
				
				var NextContainer = document.createElement('div');
				NextContainer = $(NextContainer);
				NextContainer.id = 'showcase-3-' + containerID;
				NextContainer.addClassName('showcase-3-container');
				
				if(i > 0)
					NextContainer.setStyle({ display: 'none' });
				
				$('showcase-p-container').appendChild(NextContainer);
				
				counter = 0;
				containerID++;
			}
			
			this.createSingleItem(this.data[i], 'showcase-3-' + ( containerID - 1 ) );
		}
		
		this.assignEvents();
		this.renderButtons();
	},
	
	createSingleItem: function (Obj, Parrent) {
		
		var sCon = document.createElement('div');
		sCon = $(sCon);
		sCon.addClassName('showcase-container');
		
		sCon.observe('click', this.gotoItem.bindAsEventListener(this, Obj.id));
		
		// Hover Code
		sCon.observe('mouseover', function () {
			
			var childs = this.childNodes;
			
			for(i = 0; i < childs.length; i++) {
				
				if(childs[i].hasClassName('showcase-image-container')) {
					
					var _childs = childs[i].childNodes;
					
					for(j = 0; j < _childs.length; j++) {
						
						if(_childs[i].hasClassName('showcase-image-container-normal')) {
						
							_childs[i].hide();
							break;
						}
					}
					
					break;
				}
			}
		});
		
		sCon.observe('mouseout', function () {
			
			var childs = this.childNodes;
			
			for(i = 0; i < childs.length; i++) {
				
				if(childs[i].hasClassName('showcase-image-container')) {
					
					var _childs = childs[i].childNodes;
					
					for(j = 0; j < _childs.length; j++) {
						
						if(_childs[i].hasClassName('showcase-image-container-normal')) {
						
							_childs[i].show();
							break;
						}
					}
					
					break;
				}
			}
		});
		
		// LEFT
		// Container
		var sImgCon = document.createElement('div');
		sImgCon = $(sImgCon);
		sImgCon.addClassName('showcase-image-container');
		
		// Normal background
		var sImgNor = document.createElement('div');
		sImgNor = $(sImgNor);
		sImgNor.addClassName('showcase-image-container-normal');
		sImgCon.appendChild(sImgNor);
		
		// Hover background
		var sImgHover = document.createElement('div');
		sImgHover = $(sImgHover);
		sImgHover.addClassName('showcase-image-container-hover');
		sImgCon.appendChild(sImgHover);
		
		var sImg = document.createElement('img');
		sImg = $(sImg);
		sImg.src = Obj.image;
		sImg.setAttribute('alt', '');
		sImg.addClassName('showcase-image');
		sImgCon.appendChild(sImg);
		
		sCon.appendChild(sImgCon);
		// END LEFT
		
		// RIGHT
		var sInfoCon = document.createElement('div');
		sInfoCon = $(sInfoCon);
		sInfoCon.addClassName('showcase-info-container');
		
		var sDate = document.createElement('span');
		sDate = $(sDate);
		sDate.addClassName('showcase-date');
		sDate.innerHTML = Obj.date;
		sInfoCon.appendChild(sDate);
		
		var sTitle = document.createElement('span');
		sTitle = $(sTitle);
		sTitle.addClassName('showcase-title');
		sTitle.innerHTML = Obj.title;
		sInfoCon.appendChild(sTitle);
		
		var sText = document.createElement('div');
		sText = $(sText);
		sText.addClassName('showcase-text');
		sText.innerHTML = Obj.info;
		sInfoCon.appendChild(sText);
		
		var sLink = document.createElement('div');
		sLink = $(sLink);
		sLink.addClassName('showcase-link');
		
		var sLImg = document.createElement('img');
		sLImg = $(sLImg);
		sLImg.src = './img/showcase_link_icon.gif';
		sLImg.setAttribute('alt', '');
		sLink.appendChild(sLImg);
		
		// A Space
		sLink.innerHTML += ' ';
		
		var sLLink = document.createElement('a');
		sLLink = $(sLLink);
		sLLink.addClassName('showcase-link');
		sLLink.setAttribute('alt', 'Bekijk item');
		sLLink.setAttribute('title', 'Bekijk item');
		sLLink.setAttribute('href', '?pid=5&sid=' + Obj.id);
		sLLink.innerHTML = 'Bekijk item';
		sLink.appendChild(sLLink);
		
		sInfoCon.appendChild(sLink);
		
		sCon.appendChild(sInfoCon);
		// END RIGHT
		
		//$('showcase-p-container')
		$(Parrent).appendChild(sCon);
	},
	
	assignEvents: function () {
		
		this.previousItems = this.previous.bindAsEventListener(this);
		this.nextItems = this.next.bindAsEventListener(this);
		this._setItems = this.setItems.bindAsEventListener(this);
		
		$('showcase-left-arrow').observe('click', this.previousItems);
		$('showcase-right-arrow').observe('click', this.nextItems);
		
		for(i = 0; i < this.itemCount; i++) {
			
			var A = document.createElement('a');
			A= $(A);
			A.id = 'showcase-navigator-' + i;
			
			if(i == 0)
				A.addClassName('showcase-navigator-active');
			else
				A.addClassName('showcase-navigator');
			
			A.setAttribute('href', 'javascript:SC.setItems(' + i + ')');
			A.innerHTML = i + 1;
			
			$('showcase-navigator-indicator').appendChild(A);
			
			$('showcase-navigator-indicator').innerHTML += ' ';
		}
	},
	
	/**
	 *	Geef de volgende 3 items weer
	 */
	next: function () {
		
		new _Slide(
			'showcase-3-' + this.active,
			'showcase-3-' + (this.active + 1),
			{
				direction: 'left'
			}
		);
		
		this.active++;		
		
		this.renderButtons();
	},
	
	/**
	 *	Geef de volgende 3 items weer
	 */
	previous: function () {
		
		new _Slide(
			'showcase-3-' + this.active,
			'showcase-3-' + (this.active - 1),
			{
				direction: 'right'
			}
		);
		
		this.active--;		
		
		this.renderButtons();
	},
	
	setItems: function (Num) {
		
		var direction = this.active < Num ? 'left' : 'right';
		
		new _Slide(
			'showcase-3-' + this.active,
			'showcase-3-' + Num,
			{
				direction: direction
			}
		);
		
		this.active = Num;
		
		this.renderButtons();
	},
	
	renderButtons: function () {
		
		if( ( this.active + 1 ) == this.itemCount )
			$('showcase-right-arrow').hide();
		else
			$('showcase-right-arrow').show();
		
		if( this.active == 0 )
			$('showcase-left-arrow').hide();
		else
			$('showcase-left-arrow').show();
		
		for(i = 0; i < this.itemCount; i++)
			$('showcase-navigator-' + i).className = 'showcase-navigator';
		
		$('showcase-navigator-' + this.active).className = 'showcase-navigator-active';
	},
	
	hideCurrent: function () {
		
		//Effect.BlindDown('showcase-3-' + this.active);
		
		$('showcase-3-' + this.active).hide();
	},
	
	showCurrent: function () {
		
		/*Effect.BlindDown('showcase-3-' + this.active, {
			
			duration: .4
		});*/
		
		//$('showcase-3-' + this.active).show();
	},
	
	gotoItem: function () {
		
		window.location = '?pid=5&sid=' + $A(arguments)[1];
	}
});

var _Slide = Class.create({
	
	/**
	 *	Eerste element is diegene die weg gaat
	 */
	initialize: function () {
	
		this.FirstElement = $(arguments[0])
		this.SecondElement = $(arguments[1]);
		
		this.options = Object.extend({
			
			fps: 24,
			duration: .5,
			direction: 'left'			
		}, arguments[2] || {});
		
		this.calculate();
		
		this.setPosition();
		
		if(this.options.direction == 'left')
			this.moveLeft();
		else
			this.moveRight();
			
	},
	
	setPosition: function () {
		
		this.FirstElement.setStyle({
			
			left: '0px'
		});
		
		this.SecondElement.setStyle({
			
			left: this.width + 'px',
			display: 'block'
		});
	},
	
	calculate: function () {
		
		this.width = this.FirstElement.getWidth();
		this.steps = this.options.fps * this.options.duration;
		this._steps = this.steps;
		this.stepX = this.width / this.steps;
	},
	
	moveLeft: function () {
		
		this.mover = this.moveLeft.bindAsEventListener(this);
		
		if(this._steps >= 0) {
			
			this.move(this.FirstElement, -(this.steps - this._steps) * this.stepX);
			
			this.move(this.SecondElement, -((this.steps - this._steps) * this.stepX) + this.width);
			
			setTimeout(this.mover, this.steps);
			
			this._steps--;
		}
	},
	
	moveRight: function () {
		
		this.mover = this.moveRight.bindAsEventListener(this);
		
		if(this._steps >= 0) {
			
			this.move(this.FirstElement, (this.steps - this._steps) * this.stepX);
			
			this.move(this.SecondElement, ((this.steps - this._steps) * this.stepX) - this.width);
			
			setTimeout(this.mover, this.steps);
			
			this._steps--;
		}
	},
	
	move: function (element, X) {
		
		element.setStyle({
			
			left: X + 'px'
		});
	}
});

var SC = new showcase();