var CONFIG = {};


window.addEvent('domready', function()
{
	CONFIG.BASE_URL = $(document.head).getElement('base').get('href');
	
	if ($('albumpage'))
	{
		new Merwede.Album;
	};
	
	// Pushbox
	if ($('pushbox'))
	{
		var objPushbox = new Merwede.Pushbox();
	};
	
	// Add class by Lees meer buttons
	$$('.usercontent a').each(function(el)
	{
		if (el.get('text').search(/Lees meer/i) != -1)
		{
			el.addClass('readmore_blue');
		};
	});
	
	// Mainnav IE Fix
	$$('ul.mainnav li').each(function(el, i)
	{
		el.addEvents(
		{
			mouseenter: function(){ el.addClass('hover'); },
			mouseleave: function(){ el.removeClass('hover'); }
		});
		
		if (el.getElement('a').hasClass('haschilds'))
		{
			el.getElement('a').addEvent('click', function(e){ e.preventDefault(); });
		}
	});
	
});


var Merwede = {};

Merwede.Pushbox = new Class(
{
	intActive: 0,
	intNextActive: 0,
	intDelay: 5000,
	
	intTimer: null,
	
	objElements: null,
	
    initialize: function()
	{
		
		this.objElements = {};
		this.objElements.elWrapper = $('pushbox');
		this.objElements.elItemList = this.objElements.elWrapper.getElement('ul.items');
		this.objElements.arrItems = this.objElements.elItemList.getElements('li');
		this.objElements.intItems = this.objElements.arrItems.length;
		
		this.objElements.arrButtons = this.objElements.elWrapper.getElements('ul.buttons li');
		
		this.setItemStyles();
		this.addButtonEvents();
		
		this.intTimer = this.getNext.bind(this).delay(this.intDelay);
		
    },

	setItemStyles: function()
	{
		this.objElements.arrItems.each(function(elItem, intKey)
		{
			if (intKey != this.intActive)
			{
				elItem.setStyles(
				{
					'display': 'block',
					'opacity': 0
				});
			}
			else
			{
				elItem.setStyles(
				{
					'display': 'block'
				});
			}
		}.bind(this));
		
		this.objElements.arrButtons[this.intActive].addClass('active');
	},

	addButtonEvents: function()
	{
		this.objElements.arrButtons.each(function(elButton, intKey)
		{
			elButton.addEvents(
			{
				click: function(event)
				{
					event.preventDefault();
					
					this.intTimer = $clear(this.intTimer);
					this.intNextActive = intKey;
					this.showActive();
					
				}.bind(this)
			});
		}.bind(this));
	},

	getNext: function()
	{
		this.intNextActive++;
		if (this.intNextActive == this.objElements.intItems)
		{
			this.intNextActive = 0;
		};
		
		this.showActive();
	},
	
	showActive: function()
	{
		this.objElements.arrItems[this.intActive].fade(0);
		this.objElements.arrButtons[this.intActive].removeClass('active');
		
		this.intActive = this.intNextActive;
		
		this.objElements.arrItems[this.intActive].fade(1);
		this.objElements.arrButtons[this.intActive].addClass('active');
		
		this.intTimer = this.getNext.bind(this).delay(this.intDelay);
	}

});

Merwede.Album = new Class(
{
	options: {
		strAlbumFolder: 'uploads/fotoalbums',
		elWrapper: 'albumpage',
		elSlider: 'div.thumbs_slider div.slider',
		intActive: 0,
		intNextActive: 0,
		intScrollerActive: 0,
		intDelay: 5000,
		intDuration: 300,
		intView: 5,
		intStep: 95,
		fxTransition: Fx.Transitions.Sine.easeOut,
		blnPlay: true
	},
	
	Implements: [Options, Events],
	
	initialize: function()
	{	
		CONFIG.BASE_URL = 'http://www.merwede-internaat.nl/';
			
		this.arrItems = $(this.options.elWrapper).getElements(this.options.elSlider+' ul li');
		this.intItems = this.arrItems.length;
		
		this.elPlayButton = $(this.options.elWrapper).getElement('a.pauseplay').setStyle('opacity', 0);
		
		this.objMorph = new Fx.Morph($(this.options.elWrapper).getElement(this.options.elSlider+' ul'),
		{
			link: 'cancel',
			duration: this.options.intDuration,
			transition: this.options.fxTransition
		});
		
		if ($(this.options.elWrapper).getElement('.preview .image') != true)
		{
			this.elMainImage = new Element('img', {}).inject($(this.options.elWrapper).getElement('.preview .image'));
		}
		this.getImage();
		
		this.elMainImage.addEvents(
		{
			mouseenter: function() { this.elPlayButton.fade(.8); }.bind(this),
			mouseleave: function() { this.elPlayButton.fade(0); }.bind(this)
		});
		this.elPlayButton.addEvents(
		{
			mouseenter: function() { this.elPlayButton.fade(.8); }.bind(this),
			mouseleave: function() { this.elPlayButton.fade(0); }.bind(this)
		});
		
		this.arrItems.each(function(el, i)
		{
			el.getElement('img').addEvents(
			{
				click: function()
				{
					this.intTimer = $clear(this.intTimer);
					this.options.intActive = i;
					
					this.getImage();
					if (this.options.blnPlay)
					{
						this.addPeriodical();
					};
				}.bind(this)
			});
		}.bind(this));
		
		$(this.options.elWrapper).getElement('.preview a').addEvent('click', function(e)
		{
			this.set('target', '_blank');
		});
		
		this.addButtonEvents();
		
		this.addPeriodical();
	},
	
	addPeriodical: function()
	{
		this.intTimer = this.getNextMainimage.periodical(this.options.intDelay, this);
		this.options.blnPlay = true;
	},
	
	addButtonEvents: function()
	{
		$(this.options.elWrapper).getElement('div.thumbs_slider ul li.prev').addEvents(
		{
			click: function(event)
			{
				event.preventDefault();
				
				this.getPrev();
			}.bind(this)
		});
		
		$(this.options.elWrapper).getElement('div.thumbs_slider ul li.next').addEvents(
		{
			click: function(event)
			{
				event.preventDefault();
				
				this.getNext();
			}.bind(this)
		});
		
		$(this.options.elWrapper).getElement('div.preview ul li.prev').addEvents(
		{
			click: function(event)
			{
				event.preventDefault();
				
				this.intTimer = $clear(this.intTimer);
				this.getPrevMainimage();
			}.bind(this)
		});
		
		$(this.options.elWrapper).getElement('div.preview ul li.next').addEvents(
		{
			click: function(event)
			{
				event.preventDefault();
				
				this.intTimer = $clear(this.intTimer);
				this.getNextMainimage();
			}.bind(this)
		});
		
		this.elPlayButton.addEvents(
		{
			click: function(e)
			{
				e.preventDefault();
				if (this.options.blnPlay)
				{
					this.elPlayButton.set('text', 'Start');
					this.pauseSlider();
				}
				else
				{
					this.elPlayButton.set('text', 'Pauze');
					this.startSlider();
				}
			}.bind(this)
		});
	},
	
	getPrev: function()
	{
		if (this.options.intScrollerActive != 0)
		{
			this.options.intScrollerActive--;
			this.slideThumbs();
		}
	},
	
	getNext: function()
	{
		this.options.intScrollerActive++;
		if ((this.options.intScrollerActive + this.options.intView) != this.intItems)
		{
			this.slideThumbs();
		}
		else
		{
			this.options.intScrollerActive--;
		}
	},
	
	slideThumbs: function()
	{
		var intPosition = this.options.intScrollerActive * this.options.intStep;
		
		$(this.options.elWrapper).getElement(this.options.elSlider+' ul').tween('left', '-'+intPosition);
	},
	
	getPrevMainimage: function()
	{
		this.options.intActive--;
		if (this.options.intActive < 0)
		{
			this.options.intActive = this.intItems - 1;
		}
		
		this.getImage();
	},
	
	getNextMainimage: function()
	{
		this.options.intActive++;
		if (this.options.intActive == this.intItems)
		{
			this.options.intActive = 0;
		}
		
		this.getImage();
	},
	
	getImage: function()
	{
		strSource = CONFIG.BASE_URL+this.options.strAlbumFolder+'/'+this.arrItems[this.options.intActive].getElement('img').get('alt');
		this.elMainImage.set('src', strSource).setStyle('opacity', 0);
		
		var intImageSize = this.arrItems[this.options.intActive].getElement('img').get('title').toInt();
		
		if (intImageSize > 560)
		{
			this.elMainImage.setStyle('width', 560);
		}
		else
		{
			this.elMainImage.setStyle('width', intImageSize);
		}
		
		this.elMainImage.addEvent('load', function()
		{
			this.elMainImage.fade(1);
		}.bind(this));
		
		$(this.options.elWrapper).getElement('.preview a.save').set('href', strSource);
	},
	
	pauseSlider: function()
	{
		this.intTimer = $clear(this.intTimer);
		this.options.blnPlay = false;
		
		this.elPlayButton.addClass('pause_btn');
	},
	
	startSlider: function()
	{
		this.addPeriodical();
		
		this.elPlayButton.removeClass('pause_btn');
	}	
	
});