var CONFIG = {};
var objPhotoSlide =  null;
var objCalendar =  null;
var elOverlayerFake = null;
var elOverlayerContent = null;
var objOverlayer = null;

window.addEvent('domready', function()
{	
	var baseHref = $(document.head).getElement('base');
	CONFIG.BASE_URL = baseHref.href;
	strApiUrl = CONFIG.BASE_URL + 'api/';
	
	// quiz overlayer
	var objMVO = new Monktools.Html.Overlayer($('quiz'), $$('.kaarten'), $('quiz-close'));

	if($('intro') && Cookie.read("filmgeneratie_intro") != 1)
	{
		// show overlayer
		var objIntroOverlayer = new introClass($('intro'), $$('#intro .close')[0]);
		
		// set cookie
		var cookieIntro  = Cookie.write('filmgeneratie_intro', 1, {duration: 100});
	}
	
	// programmering
	if($('programmering'))
	{
		var objProgrammering = new programmering();
	}

	if($('photoslide'))
	{
		objPhotoSlide = new photoSlide($('photoslide'), 306, 1, 0);
	}
	
	if($('photoslide-wide'))
	{
		objPhotoSlide = new photoSlide($('photoslide-wide'), 634, 1, 0);
	}
	
	if($('trailers'))
	{
		var elTrailers = $('wrapper').getElements('.trailer');
		elTrailers.each(function(element) {
			var elementId = element.id;
			element.addEvent('click', function(event) {
				event.stop();
				var objTrailerOverlay = new trailerClass($('popup-' + elementId), $$('.trailer-close'));
			});
		});	
		objPhotoSlide = new photoSlide($('trailers'), 306, 1, 0);
	}	
	
	// actrice slider
	if($('actrices'))
	{
		var actSlider = new actriceSlider();
	}	
});

var introClass = new Class({
	initialize:function(el,elButtonClose){
		
		this.elBody = $$('body')[0];

		this.elOverlayer = new Element('div',{
			'events':{
				click:function(){
					this.Close();
				}.bind(this)
			},
			'styles' : {
				'position':'absolute',
				'background-color': '#000000',
				'position': 'absolute',
				'z-index': '900',
				'opacity': '0.8',
				'left': 0,
				'top': 0,
				'display':'block'
			}
		});
		
		this.elBody.appendChild( this.elOverlayer );
		
		this.elCenter = $(el);

		this.elBody.oSize = this.elBody.getSize();

		this.elBody.oSize = this.elBody.getScrollSize();
		this.elBody.oScroll = this.elBody.getScroll();
		
		this.elOverlayer.setStyles({
			'display':'block',
			'width': this.elBody.oSize.x,
			'height': this.elBody.oSize.y ,
			'top': 0
		});
				
		this.elCenter.setStyle('display','block');
		if( !this.elCenter.oSize ) this.elCenter.oSize = this.elCenter.getSize();
		
		var intScrollTop = getScrollTop();
		var intHeight = getHeight();
		var intTop = intScrollTop + 100;
		
		this.elCenter.setStyles({
			'display':'block',
			'position':'absolute',
			'left': (( this.elBody.oSize.x-this.elCenter.oSize.x )/2)+ 'px',
			'top': intTop + 'px'
		});
		
		elButtonClose.addEvent('click',function(){
			this.Close();
		}.bind(this));
		
	},	
	
	Close:function()
	{
		this.elOverlayer.setStyle('display','none');
		this.elCenter.setStyle('display','none');
	}
	
});

var actriceSlider = new Class(
{
	elPhotoSlide: null,
	elSlider: null,
	elSlideContainer: null,
	objContainerFx: null,
	intCurrentPos: -1,
	intWidth: 163,
	intActrices: null,
	periodicalTimer: null,
	elKnob: null,
	objSliderFx: null,
	intTotalWidth: null,
	intSteps: null,
	initialize:function()
	{	
		var self = this;
		this.elPhotoSlide = $('actrices');
		this.elSlider = $('scroll');
		this.intActrices = ($('actrices').getElements('li').length) - 6; /* 6 MUST be in the view */
		this.elSlideContainer = this.elPhotoSlide.getElements('ul')[0];
		this.intTotalWidth = this.intWidth * ($('actrices').getElements('li').length);
		this.intSteps = this.intTotalWidth - (6 * this.intWidth);

		// slider smooth tween
		this.elKnob = $('knob');
		this.objSliderFx = new Fx.Tween(this.elKnob, {
			duration: 1,
			transition: Fx.Transitions.linear
		});		
		
		// container smooth tween
		this.objContainerFx = new Fx.Tween(this.elSlideContainer, {
			duration: 1000,
			transition: Fx.Transitions.Cubic.easeOut
		});	
		
		// opening anim with delay
		this.showNext.delay(500, this);
		
		// continu anim
		this.startAnim();
		
		// Create the new slider instance
		var el = $('slider');
		var actriceSlider = new Slider(el, el.getElement('.knob'), {
			steps: this.intSteps,
			range: [0],
			onChange: function(value) 
			{
				self.resetAnim();
				self.setSlider(value);
			},
			onComplete: function(value)
			{
				self.gotoNearestPosition(value);
			}
		});		

		var knob = $('knob');
		knob.addEvent('click', function(event)
		{
			event.stop()
		});			

		this.elPrevious = this.elSlider.getElements('.prev-photo')[0];
		this.elPrevious.addEvent('click', function(event)
		{
			event.stop();
			self.resetAnim(); // reset timer
			self.showPrevious();
		});
		
		this.elNext = this.elSlider.getElements('.next-photo')[0];
		this.elNext.addEvent('click', function(event)
		{
			event.stop();
			self.resetAnim(); // reset timer
			self.showNext();
		});		
	},
	setSlider: function(positionX)
	{
		this.elSlideContainer.setStyle('left', -1 * positionX);	
	},
	gotoNearestPosition: function(positionX)
	{
		var newPosition = Math.round(positionX / this.intWidth);
		
		if(newPosition != this.intCurrentPos)
		{
			this.intCurrentPos = Math.round(positionX / this.intWidth);
			this.setPosition();
		}
	},
	startAnim: function()
	{	
		this.periodicalTimer = this.showNext.periodical(4000, this);
	},
	stopAnim: function()
	{
		$clear(this.periodicalTimer);
	},	
	resetAnim: function()
	{
		$clear(this.periodicalTimer);
		this.startAnim();
	},
	setPosition: function()
	{
		var intLeft = -1 * (this.intWidth * this.intCurrentPos);
		this.objContainerFx.start('left', intLeft);
		this.checkSlider();
	},	
	showPrevious: function()
	{
		if(this.intCurrentPos > 0)
		{
			this.intCurrentPos--;
			this.setPosition();
		}
	},
	showNext: function()
	{
		if(this.intCurrentPos < this.intActrices)
		{
			this.intCurrentPos++;
			this.setPosition();
		}
	},
	checkSlider: function()
	{
		// set position of slider
		var positionX = (this.intCurrentPos * 53);
		this.objSliderFx.start('left', positionX);
	}
});

var programmering = new Class(
{
	arrElements: null,
	arrHeaders:null,
	currentElement: null,
	initialize:function()
	{
		// set clicks
		this.arrHeaders = $('programmering').getElements('.show');
		this.setClicks();
		
		this.arrElements = $('programmering').getElements('div');
		this.currentElement = this.arrElements[0].id;
		this.hideAll(this.currentElement);		
	},
	show:function(clickedElement)
	{		
		var elements = $(clickedElement).getElements('.film');
		elements.each(function(myElement) {
			myElement.setStyle('display', 'block');
		});	
		
		this.currentElement = clickedElement;
	},
	hide:function(clickedElement)
	{		
		var elements = $(clickedElement).getElements('.film');
		elements.each(function(myElement) {
			myElement.setStyle('display', 'none');
		});	
		
		// clear current
		this.currentElement = null;
	},	
	setBackground:function(element, strState)
	{
		if(strState == 'active')
		{
			element.set('class', 'hide');
		}
		else
		{
			element.set('class', 'show');
		}
	},
	setClicks:function()
	{
		var self = this;
		var elements = this.arrHeaders;
		elements.each(function(element) {
			element.addEvent('click', function(event) {
				event.stop();
				var parent = element.getParent('div');
				
				if(parent.id != self.currentElement)
				{
					self.hideAll(parent.id);
					self.setBackground(element, 'active');
				}
				else
				{
					self.hide(parent.id);
					self.setBackground(element, 'inactive');
				}
				
				
			});
		});		
	},
	hideAll:function(intShow)
	{
		var elements = this.arrElements;
		elements.each(function(element) {
			var innerElements = $(document.body).getElements('.film');
			innerElements.each(function(innerElement) {
				innerElement.setStyle('display', 'none');
			});
		});
		
		this.show(intShow);
	}
});

var trailerClass = new Class({
	initialize:function(el,elButtonClose){
		
		this.elBody = $$('body')[0];

		this.elOverlayer = new Element('div',{
			'events':{
				click:function(){
					this.Close();
				}.bind(this)
			},
			'styles' : {
				'position':'absolute',
				'background-color': '#000000',
				'position': 'absolute',
				'z-index': '900',
				'opacity': '0.8',
				'left': 0,
				'top': 0,
				'display':'block'
			}
		});
		
		this.elBody.appendChild( this.elOverlayer );
		
		this.elCenter = $(el);
		
		if(Browser.Engine.trident) // if IE
		{
			var elEmbed = $(el).getElement('embed');
		}
		else // FF
		{
			var elEmbed = $(el).getElement('object');
		}
		
		this.elCenter.setStyle('width', elEmbed.width + 'px');
		
		this.elBody.oSize = this.elBody.getSize();

		this.elBody.oSize = this.elBody.getScrollSize();
		this.elBody.oScroll = this.elBody.getScroll();
		
		this.elOverlayer.setStyles({
			'display':'block',
			'width': this.elBody.oSize.x,
			'height': this.elBody.oSize.y ,
			'top': 0
		});
				
		this.elCenter.setStyle('display','block');
		if( !this.elCenter.oSize ) this.elCenter.oSize = this.elCenter.getSize();
		
		var intScrollTop = getScrollTop();
		var intHeight = getHeight();
		var intTop = intScrollTop + 100;
		
		this.elCenter.setStyles({
			'display':'block',
			'position':'absolute',
			'left': (( this.elBody.oSize.x-this.elCenter.oSize.x )/2)+ 'px',
			'top': intTop + 'px'
		});
		
		elButtonClose.addEvent('click',function(){
			this.Close();
		}.bind(this));
		
	},	
	
	Close:function()
	{
		this.elOverlayer.setStyle('display','none');
		this.elCenter.setStyle('display','none');
	}
	
});

var photoSlide = new Class(
{
	elPhotoSlide: null,
	elPrevious: null,
	elNext: null,
	elTotal:null,
	elCurrent: null,
	elSlideContainer: null,
	elSlider: null,
	intWidth: null,
	intShowNr: null,
	objContainerFx: null,
	objPhotos: null,
	initialize:function(argElPhotoSlide, argIntWidth, argIntShowNr, argIntCurrent)
	{
		var self = this;

		this.elPhotoSlide = argElPhotoSlide;
		this.elTotal = this.elPhotoSlide.getElements('ul li').length;
		
		this.intWidth = argIntWidth;
		this.intShowNr = argIntShowNr;
		this.elCurrent = argIntCurrent;
		
		this.elSlideContainer = this.elPhotoSlide.getElements('ul')[0];
		this.objContainerFx = new Fx.Tween(this.elSlideContainer);	

		this.elSlider = $('knob');
		this.objSliderFx = new Fx.Tween(this.elSlider);	
		
		this.objPhotos = argElPhotoSlide.getElements('img.photo');

		this.elPrevious = this.elPhotoSlide.getElements('.prev-photo')[0];
		this.elPrevious.addEvent('click', function(event)
		{
			event.stop();
			self.showPrevious();
		});
		
		this.elNext = this.elPhotoSlide.getElements('.next-photo')[0];
		this.elNext.addEvent('click', function(event)
		{
			event.stop();
			self.showNext();
		});
		
		this.setCurrent(this.elCurrent);

		this.checkButtons();
	},
	showPrevious: function()
	{
		if(this.elCurrent > 0)
		{
			this.elCurrent--;
			this.setPosition();
		}
	},
	showNext: function()
	{
		if((this.elCurrent + this.intShowNr) < this.elTotal)
		{
			this.elCurrent++;
			this.setPosition();
		}
	},
	setPosition: function()
	{
		var intLeft = -1 * (this.intWidth * this.elCurrent);
		this.objContainerFx.start('left', intLeft);

		this.checkButtons();
	},
	setCurrent: function(intCurrentValue)
	{
		//console.log(intCurrentValue);
		this.elCurrent = intCurrentValue;
		this.setPosition();
	},
	checkButtons: function()
	{
		// check if we got 3 or more images
		if(this.elTotal >= 1)
		{
			// hide next?
			if((this.elCurrent + this.intShowNr) == this.elTotal)
			{
				this.elNext.fade('out');
			}
			else
			{
				this.elNext.fade('in');
			}
		}
		else
		{
			// 3 or less
			this.elNext.fade('out');
		}
		
		// hide previous if position = 0
		if(this.elCurrent == 0)
		{
			this.elPrevious.fade('out');
		}
		else
		{
			this.elPrevious.fade('in');
		}

		// set indicator
		if($('indicator'))
		{
			$('indicator').set('text', (this.elCurrent + 1) + ' / ' + this.elTotal);
		}
	}
});