//
// wmwCatalog
// 
// @author: Nik Van Looy
// @version: 30 september 2008
//
//
 
var wmwCatalog = {
 	initialize: function(element, options) {
		this.setOptions({
			productSel: 'div.productEl',
			productIDEl: 'h1',
			productTitleEl: 'h2',
			productDescriptionEl: 'p',
			imageSel: 'img.image',
			thumbSel: 'img.imagethumb',
			imagegroupSel: 'p.image',
			
			fadeDuration: 500,
			timer: true,
			timerDelay: 7000
		}, options);
		
		this.currProductId = 0;
		this.currImageId = 0;
		this.imageElements = [];
		this.imageNavElements = [];
		
		this.initCatalog = true;
		this.loading = false;
		
    	this.sourceEl = $('preview');
        this.galleryEl = element;
        
		this.imageNavEl = new Element('div').addClass('imagenav').injectInside(this.galleryEl);
		this.descriptionContainer = new Element('div').addClass('description').injectInside(this.galleryEl);
		this.descriptionEl = new Element('p').addClass('blauw').injectInside(this.descriptionContainer);

		
		this.getHtmlData();
	},
	showProduct: function(productId) {
		this.currProductId = parseInt(productId);
		if(this.loading == true)
		{
			(function(){
				this.clearImageNav();
				this.startImageShow();
				this.descriptionEl.innerHTML = this.products[this.currProductId].description;
			}).delay(this.options.fadeDuration+100, this);
		}	
		else
		{
			this.clearImageNav();
			this.startImageShow();
			this.descriptionEl.innerHTML = this.products[this.currProductId].description;
		}
	},
	showFirstProduct: function() {
		
		for(var key in this.products) {
			if(key != undefined) {
				this.currProductId = key;
				break;
			}
		}
		
		//this.currProductId = first(this.products);
		
		if(this.loading == true)
		{
			(function(){
				this.clearImageNav();
				this.startImageShow();
				this.descriptionEl.innerHTML = this.products[this.currProductId].description;
			}).delay(this.options.fadeDuration+100, this);
		}	
		else
		{
			this.clearImageNav();
			this.startImageShow();
			this.descriptionEl.innerHTML = this.products[this.currProductId].description;
		}
	},
	startImageShow: function() {
		this.currImageId = 0;
		this.constructImageElements();
		this.imageElements[parseInt(this.currImageId)].set({opacity: 1});
		this.initCatalog = true;
	},
	constructImageElements: function(){
		el = this.sourceEl;
		el.empty();
		
		var currentImg;
		this.maxImageId = this.products[this.currProductId].images.length;
		this.imageElements.length = 0;
		
		for(i=0;i<this.maxImageId;i++)
		{				
			var currentImg = new Fx.Styles(
				new Element('div').addClass('imageShow').setStyles({
					'position':'absolute',
					'left':'0px',
					'right':'0px',
					'margin':'0px',
					'padding':'0px',
					'backgroundPosition':"center center",
					'opacity':'0'
				}).injectInside(el),
				'opacity',
				{duration: 500}
			);

			currentImg.element.setStyle('backgroundImage',
				"url('" + this.products[this.currProductId].images[i].image + "')");
				
			this.imageElements[parseInt(i)] = currentImg;
		}
		
		if(this.maxImageId > 1)
		{
			this.createImageNav();
			this.changeImageNavElStatus();
		}
		this.showImage(0);
	},
	setCatalogDisable: function(delay)
	{
		this.loading = true;
		(function(){this.loading = false;}).delay(delay, this);
	},
	prepareTimer: function() {
		this.timer = this.nextImage.delay(this.options.timerDelay, this);
	},
	clearTimer: function() {
		if (this.maxImageId > 1)
			$clear(this.timer);
	},
	nextImage: function() {
		if(this.currImageId == (this.maxImageId-1))
			this.showImage(0);
		else
			this.showImage(this.currImageId+1);
	},
	createImageNav: function() {
		for(i=0;i<this.maxImageId;i++)
		{
			var currImageLinkwrapper = new Element('div').injectInside(this.imageNavEl).addClass('outer');
			
			var currImageLink = new Element('div').setStyles({
				'backgroundPosition':"center center"
			}).injectInside(currImageLinkwrapper).addClass('inner');

			currImageLink.setStyle('backgroundImage',
				"url('" + this.products[this.currProductId].images[i].thumb + "')");
			/*var currImageLink = new Element('a').addClass('imagenav').setProperties({
					id: i
				}).injectInside(this.imageNavEl);*/

			currImageLink.addEvents({
			'click': function(i){
				if(!this.imageNavElements[i].hasClass('active') && this.loading == false)
					this.showImage(i);
				}.pass(i, this)});
			currImageLink.setHTML(' ');

			if(i == 0)
			{
				if(currImageLink.hasClass('default'))
					currImageLink.removeClass('default');
				if(!currImageLink.hasClass('active'))
					currImageLink.addClass('active');
			}
				
			this.imageNavElements[i] = currImageLink;
		}		
	},
	clearImageNav: function()
	{
		this.imageNavElements = [];
		this.imageNavEl.innerHTML = '';
	},
	changeImageNavElStatus: function()
	{
		for(i=0;i<this.maxImageId ;i++)
		{
			if(this.currImageId != i)
			{
				if(!this.imageNavElements[i].hasClass('default'))
					this.imageNavElements[i].addClass('default');
				if(this.imageNavElements[i].hasClass('active'))
					this.imageNavElements[i].removeClass('active');
			}
			else
			{
				if(this.imageNavElements[i].hasClass('default'))
					this.imageNavElements[i].removeClass('default');
				this.imageNavElements[i].addClass('active');
			}
		}
	},
	showImage: function(num) {
		if(!this.loading || this.initCatalog)
		{
			this.initCatalog = false;
			this.setCatalogDisable(this.options.fadeDuration);
			this.clearTimer();
			this.imagesInit = 0;
			if (this.currImageId != num)
			{
				for(i=0;i<this.maxImageId;i++) // alles onzichtbaar maken behalve current image
				{
					if (i != this.currImageId) 
						this.imageElements[i].set({opacity: 0}); 
				}
				wmwCatalog.Transitions[this.products[this.currProductId].images[num].transition].pass([
					this.imageElements[this.currImageId],
					this.imageElements[num],
					this.currImageId,
					num,
					700], this)();
				this.currImageId = num;
			}
			if(this.maxImageId > 1)
			{
				if(this.options.timer)
					this.prepareTimer();
				this.changeImageNavElStatus();
			}
		}
	},
	getHtmlData: function(){
		// variabelen
		var products = [];
		
		options = this.options;
		element = this.sourceEl;
		
		element.getElements(options.productSel).each(function(productEl){
			// CATEGORIES
			productTeller = 0;
			imageTeller = 0;
			images = [];

			product = {
				id: productEl.getElement(options.productIDEl).innerHTML,
				title: productEl.getElement(options.productTitleEl).innerHTML,
				description: productEl.getElement(options.productDescriptionEl).innerHTML
			};
				
			productEl.getElements(options.imagegroupSel).each(function(pEl){
				image = {
					id: imageTeller,
					image: pEl.getElement(options.imageSel).getProperty('src'),
					thumb: pEl.getElement(options.thumbSel).getProperty('src'),
					transition: 'fade'
				};
				images.extend([image]);
				imageTeller++;
			});

			product.images = images;
			products[productEl.getElement(options.productIDEl).innerHTML] = product;
			productTeller++;
			productEl.remove();
		}.bind(this));

		this.products = products;
	}	
};
 
wmwCatalog = new Class(wmwCatalog);
wmwCatalog.implement(new Events);
wmwCatalog.implement(new Options);
 
wmwCatalog.Transitions = new Abstract ({
	fade: function(oldFx, newFx, oldPos, newPos, fadeDuration){
		oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
		oldFx.options.duration = newFx.options.duration = fadeDuration;
		if (newPos > oldPos) newFx.start({opacity: 1});
		else
		{
			newFx.set({opacity: 1});
			oldFx.start({opacity: 0});
		}
	},
	crossfade: function(oldFx, newFx, oldPos, newPos, fadeDuration){
		oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
		oldFx.options.duration = newFx.options.duration = fadeDuration;
		newFx.start({opacity: 1});
		oldFx.start({opacity: 0});
	},
	fadebg: function(oldFx, newFx, oldPos, newPos, fadeDuration){
		oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
		oldFx.options.duration = newFx.options.duration = fadeDuration / 2;
		oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
	}
});