var fi = {};
var Home = Class.create({
initialize: function() {
this.initEpRotation();	
},
initEpRotation: function()
{	

//number of different contents that are rotating
		this.numOfContents = 3 
		this.videoContentId = false;
		this.so = null;
		this.isRotating = true;
		this.rotationSpeed = 8000;
		this.videoActive = false;
		this.rotationImages = new Array("epMainContainer1", "epMainContainer2", "epMainContainer3");
		this.rotationButtons = new Array("btn1", "btn2", "btn3");
		
		this.btnBaseUrl = "/img/homeRotation/buttons/";
		this.currentEp = 0;
		this.nextEp = 0;
		this.neutralEp = 2; // this.numOfContents - 1; //	


//		this.createKontainVideo();
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();
	if (!$(this.rotationButtons[contentId]).up().hasClassName('active')) {
		this.activateContent(contentId);
		}
		
	return false;
	},
	activateContent: function (contentId)
	{
	var outId = this.currentEp;
	var videoPlaying = this.videoActive;

	this.hideKontainVideo();
		var outEp = this.rotationImages[this.currentEp];
		var inEp = this.rotationImages[contentId];
	
		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);	

	},
	
stopRotation: function() {
		this.isRotating = false;
		this.timer = window.clearTimeout(this.timer);		
	},
	playFade: function (imgFrom, imgTo, outEp, inEp, videoPlaying){
	var alphaSpeed = 0.5;
	var color = $(imgTo).getStyle('backgroundColor');
    if( ((outEp == this.videoContentId ) && (videoPlaying))) { // animating from kontain video playing
		$(imgFrom).hide();
		this.appearContent(imgTo, 0.5);	
		}
		else {
		this.fadeContent(imgFrom, alphaSpeed);
					
		$('feature').morph({backgroundColor: color}, {
		queue: 'end', duration: 0.5});
			
		this.appearContent(imgTo, alphaSpeed);
		}	
	},
	fadeContent: function(content, duration)
	{
		new Effect.Fade(content, {
			duration: duration, 
			queue: 'end', 
			limit: 0.5, 
			afterFinish: function(){
			}.bind(this)
		});			
	},
	appearContent: function(content, duration) 
	{
		new Effect.Appear(content, {
			duration: duration, 
			queue: 'end', 
			limit: 0.5, 
			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);
		}	
	},
	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;		
	},	
	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++;
		}		
	},
	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");
	},

	fadeInKontainVideo: function (e) {
		Event.stop(e);
		new Effect.Fade($(this.rotationImages[this.videoContentId ]), {
			duration: 0.3, 
			queue: 'end', 
			limit: 1, 
			afterFinish: function(){
			//	this.showKontainVideo();
			}.bind(this)
		});		
	},

	showKontainVideo: function()
	{
		this.isRotating = false;
		this.videoActive = true;
		$("epMainContainer5").removeClassName('videoEPDeactivated');		
		$("epMainContainer5").addClassName('videoEPActive');			
		$("epMainContainer5").setStyle({'zIndex': 5});
		this.timer = window.setTimeout(this.startVideoDelay.bindAsEventListener(this), 200);
		//mov.startVideo();
	},
	
	startVideoDelay: function() {
		this.timer = window.clearTimeout(this.timer);	
		this.timer = null;
		var mov = $('videoEp');
		mov.startVideo();
	},
	
	hideKontainVideo: function()
	{	
		$("epMainContainer5").removeClassName('videoEPActive');
		$("epMainContainer5").addClassName('videoEPDeactivated');
		$("epMainContainer5").setStyle({'zIndex': 0});
		
		if (this.videoActive) {
			var mov = $('videoEp');
			if (mov.getPlaying()) {
				mov.stopVideo();
			}
		}
		this.videoActive = false;
	},
	createKontainVideo: function()
	{
		
		var playOnLoad = Prototype.Browser.IE ? true : false;
		this.so = new SWFObject('../images/dubai.swf', 'videoEp', '672', '272', '0', '#FFFFFF');
		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('vWidth', 672);
		this.so.addVariable('vHeight', 272);
		if (playOnLoad) {
		this.so.addVariable('autoStartPlay');
		}
		this.so.addVariable('autoStart', true);
		this.so.addVariable('buttonSkin', 'B');
		this.so.write('epMainContainer5');	
	},
	createSecondaryFeature: function()
	{
		var so = new SWFObject('images/dubai.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 = 3;
	fi.base = new Base(numOfTsEntries);
	fi.formValidator = new FormValidator();
	fi.home = new Home();
}
document.observe("dom:loaded",initpage);