var fi = {};

var Home = Class.create({

	initialize: function() {
		
		this.initEpRotation();	

		//this.createSecondaryFeature();	

	},

	initEpRotation: function()
	{	
		//number of different contents that are rotating
		this.numOfContents = 6 
		this.videoContentId = false;
		this.so = null;
		this.isRotating = true;
		this.rotationSpeed = 8000;
		this.videoActive = false;
		this.rotationImages = new Array("epMainContainer1", "epMainContainer2", "epMainContainer3", "epMainContainer4", "epMainContainer5", "epMainContainer6");
		this.rotationButtons = new Array("btn1", "btn2", "btn3", "btn4", "btn5", "btn6");
		
		this.btnBaseUrl = "/img/homeRotation/buttons/";
		this.currentEp = 0;
		this.nextEp = 0;
		this.neutralEp = 2; // this.numOfContents - 1; //	
		
		// Listen to clicks on the image in the second container, that's when we'll embed the flash video
		$('epMainContainer6Image').observe('click', this.onEpVideoButtonClick.bindAsEventListener(this));
		
		this.resetEpRotation();
		
		this.addButtonListeners();
		this.adjustRotateButtons();
		
		this.timer = window.setTimeout(this.rotateKontainEp.bindAsEventListener(this), this.rotationSpeed);			
	},
	
	addButtonListeners: function ()
	{
		for(var i = 0; i < this.numOfContents; i++) {
			$( this.rotationButtons[i] ).observe('click', this.onButtonClicked.bindAsEventListener(this, i));
		}
	},
	
	onButtonClicked: function (event, contentId)
	{
		Event.stop(event);
		this.stopRotation();
		
		// Don't allow clicks on the currently slected item
		if (!$(this.rotationButtons[contentId]).up().hasClassName('active')) {
			this.activateContent(contentId);
		}
		
		return false;
	},
	
	onEpVideoButtonClick: function (event, contentId)
	{
		Event.stop(event);
		this.stopRotation();
		
		this.showEPVideoFeature();
		this.createEPVideoFeature();
		
		return false;
	},

	/**
	 * Activates a specific content
	 * 
	 * @param {Object} contentId
	 */
	activateContent: function (contentId)
	{
		var outId = this.currentEp;
		var videoPlaying = this.videoActive;
		
		var outEp = this.rotationImages[this.currentEp];
		var inEp = this.rotationImages[contentId];
		
		// If we are leaving a video slide, stop it
		if($(outEp).hasClassName('video')) {
			this.hideEPVideoFeature();
		}
		
		this.currentEp = contentId;
		this.adjustRotateButtons();
		
		$(inEp).setStyle({
			'zIndex': this.numOfContents - 1,
			'visibility': 'visible'
		});
		$(outEp).setStyle({
			'zIndex': this.numOfContents
		});
		
		this.playFade(outEp, inEp, outId, contentId, videoPlaying);
		
		/*
		for (var i = 0; i < this.numOfContents; i++) {
			$(this.rotationLeftCont[i]).hide();
		}
		*/
			
		//$(this.rotationLeftCont[contentId]).show();
		//$(this.rotationLeftCont[contentId]).setStyle({'visibility':'visible','height':'auto'});
	},
	
	stopRotation: function() {
		this.isRotating = false;
		this.timer = window.clearTimeout(this.timer);		
	},

	playFade: function (imgFrom, imgTo, outEp, inEp, videoPlaying)
	{
		var alphaSpeed = 0.2;
		var color = $(imgTo).getStyle('backgroundColor');
		
		this.fadeContent(imgFrom, alphaSpeed);
	
		$('feature').morph({backgroundColor: color}, {
		queue: 'end', duration: 0.2});
		
		this.appearContent(imgTo, alphaSpeed);
	},
	
	fadeContent: function(content, duration)
	{
		new Effect.Fade(content, {
			duration: duration, 
			queue: 'end', 
			limit: 1, 
			afterFinish: function(){
			}.bind(this)
		});			
	},
	
	appearContent: function(content, duration) 
	{
		new Effect.Appear(content, {
			duration: duration, 
			queue: 'end', 
			limit: 1, 
			afterFinish: function(){
			}.bind(this)
		});		
	},

	rotateKontainEp: function ()
	{	
		if (this.isRotating) {
			this.updateEpIdentifiers();

			this.setRotationContent(this.rotationImages, true);
			//this.setRotationContent(this.rotationLeftCont, false);		
		
			this.currentEp = this.nextEp;			
			this.adjustRotateButtons();
		
			this.timer = window.setTimeout(this.rotateKontainEp.bindAsEventListener(this), this.rotationSpeed);
		}	
	},

	/*
	 * @param contents Array holds all content wrappers for specific changing part
	 * @param fade Boolean defines if the contents should be animated
	 */
	setRotationContent: function (contents, animate) {
		var outContent = contents[this.currentEp];
		var inContent = contents[this.nextEp];		
		var neutralContent = contents[this.neutralEp];
		
		$(neutralContent).setStyle({'zIndex': this.numOfContents - 2}); //1});
		$(inContent).setStyle({'visibility':'visible','zIndex': this.numOfContents - 1}); //2});
		$(outContent).setStyle({'zIndex': this.numOfContents}); //3});

		if (animate) {
			this.playFade(outContent, inContent, outContent, inContent, false);
		} else {
			for(var i = 0; i < this.numOfContents; i++) {
				$(contents[i]).hide();
			}
			$(contents[this.nextEp]).show();
			$(contents[this.nextEp]).setStyle({'visibility':'visible', 'height':'auto'});
		}

	},

	resetEpRotation: function ()
	{
		for (var i = 0; i < this.numOfContents; i++)
		{
			$(this.rotationImages[i]).hide();
			//$(this.rotationLeftCont[i]).hide();
		}
		$(this.rotationImages[0]).show();
		//$(this.rotationLeftCont[0]).show();
			
		this.currentEp = 0;
		this.nextEp = 0;
		this.neutralEp = 2;		
	},	
	
	/*
	 * Update the Ids for the Ep containers that are affected by the upcoming 
	 * rotation
	 */
	updateEpIdentifiers: function()
	{
		if(this.currentEp == 0) {
			this.resetEpRotation();
		} else {
			this.neutralEp = this.currentEp-1;
		}
		
		if(this.currentEp == this.numOfContents - 1) {
			this.nextEp = 0;
		} else {
			this.nextEp++;
		}		
	},
	
	/*
	 * Resets all rotate buttons to default grey and
	 * then sets the button of the current EP to active state
	 */
	adjustRotateButtons: function ()
	{	
		for(var i=0; i < this.numOfContents; i++)
		{
			var tmpBtn = this.rotationButtons[i];
			if($(tmpBtn).up().hasClassName("active")) {
				$(tmpBtn).up().removeClassName("active");
			}
		}
		
		var currentBtn = this.rotationButtons[this.currentEp];
		
		$(currentBtn).up().addClassName("active");
	},

	showEPVideoFeature: function()
	{
		$('epMainContainer6Video').show();
		$('epMainContainer6Image').hide();
		
		this.videoActive = true;
	},
	
	hideEPVideoFeature: function()
	{	
		$('epMainContainer6Video').hide();
		$('epMainContainer6Image').show();
		
		if (this.videoActive) {
			var mov = $('videoEp');
			if (mov && mov.getPlaying && mov.getPlaying()) {
				mov.stopVideo();
			}
		}
		
		this.videoActive = false;
	},
	
	/*
	 * 
	 */
	createEPVideoFeature: function()
	{
		//this.so = new SWFObject('http://www.f-i.com/img/media/homeRotation/videoPlayer.swf', 'videoEp', '918', '420', '0', '#FFFFFF');
		//this.so = new SWFObject('http://media.kontain.com/www.f-i.com/img/media/homeRotation/videoPlayerEditorial.swf', 'videoEp', '918', '420', '0', '#000000');
		this.so = new SWFObject('/swf/videoPlayerEditorial.swf', 'videoEp', '918', '420', '0', '#000000');
		this.so.addParam('quality', 'best');
		this.so.addParam('menu', 'false');
		this.so.addParam('allowScriptAccess', 'always');
		
		//this.so.addVariable('vSource', 'http://media.kontain.com/www.f-i.com/img/media/homeRotation/kontainPromo.f4v'); // FLV video source
		//this.so.addVariable('iSource', 'http://media.kontain.com/www.f-i.com/img/media/homeRotation/videoPlayer.swf'); // Video image still
		//this.so.addVariable('vSource', '/img/homeRotation/wide/anonymousProducer.f4v'); // FLV video source
		this.so.addVariable('vSource', 'http://media.kontain.com/www.f-i.com/img/media/homeRotation/anonymousProducer.f4v'); // FLV video source
		this.so.addVariable('iSource', ''); // Video image still
		
		//this.so.addVariable('logo', 'http://www.f-i.com/img/media/works-32/'); // Transparent PNG logo overlay
		
		this.so.addVariable('vWidth', 918);
		this.so.addVariable('vHeight', 420);
		
		this.so.addVariable('autoStart', true);
		this.so.addVariable('autoStartPlay', true);
		
		this.so.addVariable('autoStart', true);
		this.so.addVariable('buttonSkin', 'A'); // Value can either be "A" or "B" (depends on player)
		this.so.write('epMainContainer6Video');	
	},
	
	createSecondaryFeature: function()
	{
		var so = new SWFObject('swf/videoPlayerSmall.swf', 'videoSmall', '428', '219', '0', '#000000');
		so.addParam('quality', 'best');
		so.addParam('menu', 'false');
		so.addVariable('vSource', window.secondaryFeature.vSource); // FLV video source
		so.addVariable('iSource', window.secondaryFeature.iSource); // Video image still
		so.addVariable('logo', window.secondaryFeature.logo); // Transparent PNG logo overlay
		so.addVariable('vWidth', 428);
		so.addVariable('vHeight', 173);
		so.addVariable('buttonSkin', 'A'); // Value can either be "A" or "B" (depends on player)
		so.write('smallVideo');
	}
	
});

function initpage(){
	var numOfTsEntries = 6;

	fi.base = new Base(numOfTsEntries);
	
	fi.formValidator = new FormValidator();

	fi.home = new Home();

}

document.observe("dom:loaded",initpage);