var Site = {

	// Set some object wide variables
	
	
	// Initialisation function
	start : function() 
	{
		Site.behaviour();
	},
	
	// Use CSS selectors to assign page behaviours
	behaviour : function() 
	{
		$$('#signup_bt').each(function(el,i){
			el.observe('click', function(e) {
				Site.signUp();
			});
		});
		$$('#email').each(function(el, i){
			el.observe('focus', function(e) {
				if ($F('email') == "email") {
					$('email').value = "";
				}
			});
			el.observe('blur', function(e) {
				if ($F('email') == "") {
					$('email').value = "email";
				}
			});
		});
		$$('#zip').each(function(el, i){
			el.observe('focus', function(e) {
				if ($F('zip') == "zip") {
					$('zip').value = "";
				}
			});
			el.observe('blur', function(e) {
				if ($F('zip') == "") {
					$('zip').value = "zip";
				}
			});
		});
		$$('#nav > li').each(function(el, i){
			el.observe('mouseover', function(e){
				el.addClassName('sfHover');
			});
			el.observe('mouseout', function(e){
				el.removeClassName('sfHover'); 
			});
		});
		$$('#logo').each(function(el,i){
			new ContentSlider(el);
		});
	},
	
	// Run the signup functionality via AJAX
	signUp : function()
	{
		new Ajax.Request(baseURL + 'emails/add/',
		{
			method: 'post',
			postBody: '&email=' + $F('email') + '&zip=' + $F('zip'),
			onComplete: function(tl) {
				$('msg').innerHTML = tl.responseText;
			}
		});
	}
}

document.observe('dom:loaded', Site.start);	


var ContentSlider = Class.create({

	initialize: function(element) {
		this.element = $(element);
        this.options = Object.extend({
        	transition: Effect.Transitions.sinoidal,
        	duration: 1,
        	defaultOpenBox: 0,
        	timerInterval: 6
        }, arguments[1] || {});
        this.setup();
	},
	
	setup: function()
	{
		this.element.setStyle({ 
			'overflow' : 'hidden'
		});
		this.boxes = $$('#' + this.element.id + ' > div');
		this.contentWidth = this.element.getWidth();
		this.sliderBox = this.element.insert('<div id="sliderBox"></div>');
		this.navBar = this.element.insert('<ul id="sliderNav"></ul>');
		this.playButton = this.element.insert('<div id="playBtn" style="display:none;"><a href="#">Play</a></div>');
		this.boxes.each(function(el, i)
		{
			// get the headings for each box
			var h2 = el.select('h2').first();
			h2.hide();
			// create an li and insert the h2 text into them
			var li = document.createElement('li');
			li.innerHTML = h2.innerHTML;
			if(i==this.options.defaultOpenBox)
			{
				li.className = 'selectedNavItem';
			}
			$('sliderNav').appendChild(li);
			// set some styles on the boxes so that sit in place correctly
			el.setStyle({
				'position' : 'absolute',
				'top' : '0px',
				'left' : (i * this.contentWidth).toString() + 'px'
			});
			// add the box to the slider container
			$('sliderBox').appendChild(el);
		}.bind(this));
		// add click behaviour to each li
		$$('#sliderNav > li').each(function(el, i){
			el.observe('click', this.slideComponent.bindAsEventListener(this));
		}.bind(this));
		
		$$('#playBtn a').each(function(el, i){
			el.observe('click', function(e){
				$('playBtn').hide();
				Event.stop(e);
				this.timer = new PeriodicalExecuter(this.timerSlide.bind(this), this.options.timerInterval);
			}.bindAsEventListener(this));
		}.bind(this));
		
		this.nextBox = this.options.defaultOpenBox + 1;
		this.timer = new PeriodicalExecuter(this.timerSlide.bind(this), this.options.timerInterval);
	},
	
	timerSlide : function()
	{
		$$('#sliderNav > li').each(function(el, i){
			if(i == this.nextBox){
				var scrollPos = i * this.contentWidth;
				new Effect.Move('sliderBox', { x: -1 * scrollPos, mode: 'absolute' });
				el.addClassName('selectedNavItem');
			} else {
				el.removeClassName('selectedNavItem');
			}
		}.bind(this));
		this.nextBox++;
		this.nextBox = this.nextBox > (this.boxes.length -1) ? 0 : this.nextBox;
	},
	
	slideComponent : function(e)
	{
		this.timer.stop();
		$('playBtn').show();
		$$('#sliderNav > li').each(function(el, i){
			if(Event.element(e) == el){
				var scrollPos = i * this.contentWidth;
				new Effect.Move('sliderBox', { x: -1 * scrollPos, mode: 'absolute' });
				el.addClassName('selectedNavItem');
				this.nextBox = i + 1;
				this.nextBox = this.nextBox > (this.boxes.length -1) ? 0 : this.nextBox;
			} else {
				el.removeClassName('selectedNavItem');
			}
		}.bind(this));
	}
	
});