var HomePageReveal = new Class({
	/*  */
	Implements: [Options,Events, Chain], 						  

	options: {
		/**/
		
	}, 
	
	log: function(){
		return false;
		//if('console' in window && 'debug' in window.console) console.debug.apply(console, arguments);
	},
	
	initialize: function(options){ 
		this.setOptions(options);
		
		/* setup */
		var fewcha = document.getElement('#few-kam-sec');
		fewcha.fade('hide');
		var whaton = document.getElement('#whatOn');
		whaton.fade('hide');
		var whotalk = document.getElement('#who-talk');
		whotalk.fade('hide');
		var actionsec = document.getElement('#actionSec');
		actionsec.fade('hide');
		
		var header = document.getElement('#head-wrap header');
		header.fade('hide');
		
		var search = document.getElement('#search-wrap');
		search.fade('hide');
		
		
		var footer = document.getElement('footer');
		footer.fade('hide');
		
		this.chain(
			function(){
				var photos = document.getElement('#header-photos');
				photos.origPos = photos.getStyle('top');
				photos.get('tween').setOptions({'duration':2000,'transition':Fx.Transitions.Elastic.easeOut}).start('top',['-290',photos.origPos]);
				
				var timeoutID = this.callChain.delay(750,this);
				
			}.bind(this) ,
			
			function(){
				header.get('morph').setOptions(
						{'duration':1500,'transition':Fx.Transitions.Elastic.easeOut}
					).start(
						{'opacity':1,'top':[-50,header.getStyle('top')] }
					);
					
				var timeoutID = this.callChain.delay(500,this);
					
			}.bind(this),

			function(){
				search.get('morph').setOptions(
						{'duration':1500,'transition':Fx.Transitions.Elastic.easeOut}
					).start(
						{'opacity':1,'top':[search.getStyle('top').toInt() - 50, search.getStyle('top')] }
					);
					
				var timeoutID = this.callChain.delay(500,this);
			}.bind(this),

			function(){
				fewcha.get('morph').setOptions(
						{'duration':1500,'transition':Fx.Transitions.Elastic.easeOut}
					).start(
						{'opacity':1,'top':[fewcha.getStyle('top').toInt() + 50, fewcha.getStyle('top')] }
					);
					
				var timeoutID = this.callChain.delay(500,this);
			}.bind(this),
			
			function(){
				whaton.get('morph').setOptions(
						{'duration':1500,'transition':Fx.Transitions.Elastic.easeOut}
					).start(
						{'opacity':1,'top':[whaton.getStyle('top').toInt() + 50, whaton.getStyle('top')] }
					);
					
				var timeoutID = this.callChain.delay(500,this);
			}.bind(this),

			function(){
				whotalk.get('morph').setOptions(
						{'duration':500,'transition':Fx.Transitions.Back.easeOut}
					).start(
						{'opacity':1,'top':[whotalk.getStyle('top').toInt() - 500, whotalk.getStyle('top')] }
					);
					
				var timeoutID = this.callChain.delay(500,this);
			}.bind(this),

			function(){
				this.homeActionLink = new ActionLink();
				actionsec.get('tween').setOptions(
						{'duration':250,'transition':Fx.Transitions.Quad.easeOut}
					).start('opacity',1).chain( this.callChain.bind(this) );
					
					//var timeoutID = this.callChain.delay(250,this);
				
			}.bind(this),
			
			
			
			function(){
				footer.get('morph').setOptions(
						{'duration':500,'transition':Fx.Transitions.Back.easeOut}
					).start(
						{'opacity':1,'top':[footer.getStyle('top').toInt() + 50, footer.getStyle('top')] }
					);
					
				var timeoutID = this.callChain.delay(500,this);
			}.bind(this)
			
		);
		
		
		
		this.callChain();
	},
/*
	called when using document.id with this class as parameter
	*/
	toElement : function (){
		return this.CustomElement;
	}	
});



/*
mouseover animation for home page action link
params[''] () : 
*/
var ActionLink = function(){	
	this.el = document.getElement('#actionSec img');
	if(!this.el){
		return false;
	}
	
	this.container = document.getElement('#main-wrap');
	
	this.log(this.el.getSize());
	
	if(!Fx.Spring){
		/* load more.move */
		var myScript = Asset.javascript('assets/js/Fx.Spring.js', {
		    id: 'MootoolsFxSrping',
		    onLoad: function(){
		        this.init();
		    }.bind(this)
		});
	}else{
		this.init();
	}
}
ActionLink.prototype.log = function(){
		return false;
		//if('console' in window && 'debug' in window.console) console.debug.apply(console, arguments);
 
	}
ActionLink.prototype.init = function(){
	//this.el.origSize = this.el.getSize();

	this.elParent = this.el.getParent('a');
	this.elParent.origCoords = this.elParent.getPosition(this.elParent.getOffsetParent());

	this.log(this.el.origSize, this.elParent.origCoords);

	this.el.Morf = new Fx.Morph(this.el,{'link':'cancel','duration':1000,'transition':Fx.Transitions.Elastic.easeOut});
	this.elParent.Morf = new Fx.Morph(this.elParent,{'link':'cancel','duration':1000,'transition':Fx.Transitions.Elastic.easeOut});
	//e.set('move', {duration: 'long', transition: 'bounce:out'});
	
	
	/* spring */
//	var springParams = {'stiffness' : 200,'friction' :10}
//	this.xSpring = new Fx.Spring(Object.merge({
//		'onMotion': function(t){this.springStep(this.elParent,'left',t)}.bind(this)
//	},springParams));
//
//	this.ySpring = new Fx.Spring(Object.merge({
//		'onMotion': function(t){this.springStep(this.elParent,'top',t)}.bind(this)
//	},springParams));
//	this.wSpring = new Fx.Spring(Object.merge({
//		'onMotion': function(t){this.springStep(this.el,'width',t)}.bind(this)
//	},springParams));
//	this.hSpring = new Fx.Spring(Object.merge({
//		'onMotion': function(t){this.springStep(this.el,'height',t)}.bind(this)
//	},springParams));
//	
//	//this.container.addEvent('mousemove', this.mousemove.bind(this));
//	this.log(this);
	
	
	
	//this.xSpring.start(this.xSpring.get(), e.page.x);
	//this.ySpring.start(this.ySpring.get(), e.page.y);

	//this.log(e);
	
	this.el.addEvent('mouseenter',function(e){
		if(!this.el.origSize)this.el.origSize = this.el.getSize();/* safari */
		
		var c = this.el.origSize;
		var pc = this.elParent.origCoords;
		//this.log(c.left,c.left - 100);
		this.el.Morf.start({
			'height': c.y * 1.3,
			'width' : c.x * 1.3
			
		});
		
		this.elParent.Morf.start({
			'top': pc.y - 20,
			'left' : pc.x - 50
		});
		
//		this.wSpring.start(c.width, c.width * 1.2);
//		this.hSpring.start(c.height, c.height * 1.2);
//		
//		this.xSpring.start(pc.left, pc.left - 50);
		//this.ySpring.start(c.top, c.top - 100);
		

	}.bind(this));
	
	this.el.addEvent('mouseleave',function(e){
		var c = this.el.origSize;
		var pc = this.elParent.origCoords;
		//this.log(c.left);
		this.el.Morf.start({
			'height': c.y,
			'width' : c.x
		});
		
		this.elParent.Morf.start({
			'top' : pc.y,
			'left': pc.x

		});
			
		//this.wSpring.start(this.wSpring.get(), c.width);
		//this.hSpring.start(this.hSpring.get(), c.height);
		//
		//this.xSpring.start(this.xSpring.get(), pc.left);
		
	}.bind(this));

	/* sproing! */
	this.el.fireEvent('mouseenter');
	this.el.fireEvent('mouseleave',null,150);
};

ActionLink.prototype.springStep = function(el,p,t) {
	//this.log(el,p,t);
	el.setStyle(p,t);
};
ActionLink.prototype.getLink = function() {
	return this.elParent;
}



function homeWhatsOnWidget(){
	/* What's On 
	Dynamically generate navigation links from articles
	*/
	
	var viewport = document.getElement('#whatOn .viewport');
	if(!viewport) return false;

	var ulList = new Element('ul',{'class':'navigator'});
	
	
	var portalHeight = viewport.getSize().y;
	
	var doScroll = function(){
			var index = arguments[0];

			var a = document.getElement('#whatOn .articles');
			var aWidth = document.getElement('#whatOn .viewport').getSize().x;
			a.get('tween').setOptions(
				{'transition':Fx.Transitions.Elastic.easeOut, 'duration':2000}
			).start('left',index * - aWidth);
			
			var active;
			if(active = document.getElement('#whatOn ul.navigator').getElement('a.active')){
				active.removeClass('active');
			}
			this.addClass('active');
			return false;
	}
	
	viewport.getElements('div.article').each(
		function(item, index, array){
			/* create nav for each article */
			var myLI = new Element('li');
			var myLink = new Element('a',{
				'href':'javascript:;',
				'html':''
			});
			
			/* first link is active by default */
			myLink.addClass(index==0?'active':'');
			
			/* add clicky event */
			myLink.addEvent('click', doScroll.pass(index,myLink) );
			
			/* put link inside LI */
			myLI.grab(myLink);
			
			/* put LI inside UL */
			ulList.grab(myLI);	
			
		},this
	);
	
	viewport.grab(ulList,'after');
	
	viewport.getElement('div.articles').tween('left',0);
	
	/* timer */
	var autoScroll = function(){
		
		var ulList = document.getElement('#whatOn ul.navigator');
		var allLinks = ulList.getElements('li a');
		var activeLink = ulList.getElement('li a.active');
		var i = allLinks.indexOf(activeLink);
		var iNext = i+1;
		
		if(iNext == allLinks.length){
			/* back to start */
			iNext=0;
		}
		
		//console.debug('iNext=',iNext);
		/* do the scroll thang */
		doScroll.attempt(iNext,allLinks[iNext]);
	}
	
	var delay = 4 * 1000;
	/* interval id */
	var autoInterval = autoScroll.periodical(delay,autoScroll);
	
	/* clear internal on mouseenter */
	var container = document.getElement('#whatOn');
	container.addEvent('mouseenter',function(e){
		/* bound to function homeLabourWidget */
		//console.log('autoInterval=',autoInterval);
		/* clear the interval */
		if(autoInterval) clearInterval(autoInterval);
		
	}.bind(this));
	
	/* start periodical on mouseleave */
	container.addEvent('mouseleave',function(e){
		/* bound to function homeLabourWidget */
		//console.log('autoInterval=',autoInterval);
		/* start the interval */
		autoInterval = autoScroll.periodical(delay,autoScroll);
		
	}.bind(this));
}

function logoToolTip(){
	/* Hover effect for Logo link */
	var logoLink = document.id('atm-link');
	
	/* the tooltip DIV */
	var toolTip = document.id('atm-info');
	toolTip.setStyles({'opacity':0,'right':'0px'});
	
	if(Browser.safari || Browser.chrome){
		toolTip.setStyles({'top':'-95%'});
	}
	
	/* create morph obj */
	tooltipMorph = new Fx.Morph(toolTip,{'link':'cancel','duration': 'normal', 'transition': Fx.Transitions.Sine.easeInOut});
	
	var showTooltip = function(){
		var dest = 127;
		/* clear timer */
		if(this.timeoutID!==undefined) clearTimeout(this.timeoutID);
		
		this.start({ 'opacity': 1 });
		
	}
	var hideTooltip = function(){
		/* fade out */
		this.start({'opacity': 0 });
	}
	
	var startHideTooltipTimer = function(){
		/* begin timer to fade out */
		this.timeoutID = hideTooltip.delay(1000,this);
	}
	
	var clearTimer = function(){
		/* clear timer */
		if(this.timeoutID!==undefined) clearTimeout(this.timeoutID);
	}
	
	logoLink.addEvent('mouseenter', showTooltip.bind(tooltipMorph));
	logoLink.addEvent('mouseleave', startHideTooltipTimer.bind(tooltipMorph));
	
	toolTip.addEvent('mouseenter', clearTimer.bind(tooltipMorph));
	toolTip.addEvent('mouseleave', startHideTooltipTimer.bind(tooltipMorph));
	
}

/* Test for position:fixed support */
Modernizr.addTest('positionfixed', function () {
    var test    = document.createElement('div'),
        control = test.cloneNode(false),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    var oldCssText = root.style.cssText;
    root.style.cssText = 'padding:0;margin:0';
    test.style.cssText = 'position:fixed;top:42px'; 
    root.appendChild(test);
    root.appendChild(control);
    
    var ret = test.offsetTop !== control.offsetTop;

    root.removeChild(test);
    root.removeChild(control);
    root.style.cssText = oldCssText;
    
    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});