/*

	Fudge vs. Area 17 vs. Prototype & Scriptaculous

	written by Phil (phil at fudgestudios.com) and Mike "1312" (mike at fudgestudios.com)

	for Area 17 (www.area17.com)
	

	This javascript is the main javascript for the sites actions.
	
*/

// --------------------------------------------------------------------------------------------------------------
// set up variables

var isSafari = false;
var isSafari3 = false;
var isIE = false;
var isIE7 = false;	


var tickerText = ""; // filled in on DOM ready
var tickerTextLink = "";
var tickerTextContent = ""; // filled in on DOM ready
var tickerDelay = 50; // milliseconds
var tickerCurrent = 1; // just a counter, which character is being written
var tickerNewsNum = 1; // just a counter, which news story is being written
var tickerLoopDelay = 4000;  // milliseconds
var tickerUrl = ""; // filled in on DOM ready
var tickerTruncateAt = null;

// --------------------------------------------------------------------------------------------------------------
// what to do on DOM ready
document.observe("dom:loaded", run_on_load);
// what to do when everythings loaded
Event.observe(window, 'load', function() { windowLoaded(); });


function run_on_load() {
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ some simple browser testing */
	// Safari versioning
	isSafari = Prototype.Browser.WebKit;
	// are we on safari 3? add a class (it over anti aliases everything which causes padding issues)
	// http://www.hedgerwow.com/360/dhtml/detect-safari3-by-js-css.html
	if( window.devicePixelRatio && window.getMatchedCSSRules && !window.Opera){
		isSafari3 = !!window.getMatchedCSSRules(document.documentElement,'');
	}
	if (isSafari) {	
		$$('body').invoke('addClassName', 'isSafari');
		if (isSafari3) { $$('body').invoke('addClassName', 'isSafari3'); }
	}
	// (ok so theres an assumption that any Safari thats not Safari3 is Safari2 here)		
	// IE versioning
	isIE = Prototype.Browser.IE;
	if (typeof document.body.style.maxHeight != "undefined") { if (!isSafari) { isIE7 = true; } }
	if (isIE) {	
		$$('body').invoke('addClassName', 'isIE');
		if (isIE7) { $$('body').invoke('addClassName', 'isIE7'); }
	}
	/* http://gmatter.wordpress.com/2006/10/20/detecting-ie7-in-javascript/ */
	// ### ok so theres an assumption that any IE thats not IE7 is IE6 here	
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ set up some adding of classes to things */	
	
	setUpClasses();	
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ do some roll over events */
	
	// class="image" (for input type=image)
	$$('.image').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.removeClassName('hover');
		});
	});
	
	// table cells and headers - makes the tr above it have a class
	$$('td', 'th').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.up().addClassName('hover');
			element.up().up().up().addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.up().removeClassName('hover');
			element.up().up().up().removeClassName('hover');
		});
	});
	
	// table caption
	$$('table caption').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.up().addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.up().removeClassName('hover');
		});
	});
	
	// links in table cells, other wise the focus moves from td to a and looses the td's roll over
	$$('td a').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.up().up().addClassName('hover');
			element.up().up().up().up().addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.up().up().removeClassName('hover');
			element.up().up().up().up().removeClassName('hover');
		});
	});
	
	// top banner rollover
	$$('div#banner div').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.removeClassName('hover');
		});
	});
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ subscription boxes */
	
	if (($$('div.subscribe form').length)!=0) {
		setUpSubscribeBoxes();		
		$$('div.subscribe p a').each(function(el, i){	
			if(i < 2) {
			el.observe('click', function(event) {
				showSubscribeForm();
				Event.stop(event);
			});	
			}
		});		
	}
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ contact page forms (contact/submit tax query) */
	
	if (($$('form.submitEnquiry').length)!=0) {
		contactPageForms();
	}
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ticker */
	
	if (($$('div#ticker').length)!=0) {
		$$('div#ticker')[0].insert('<p><a href="/"></a></p>', {position: "bottom"});		
		//tickerText = $$("div#ticker p")[0];
		//tickerTextContent = $$("div#ticker ul li")[0].innerHTML;
		
		tickerText = $$("div#ticker p")[0].down(0);
		tickerTextContent = $$("div#ticker ul li")[0].down(0).innerHTML;
		
		tickerTextContent = tickerTextContent.unescapeHTML();
		tickerURL = $$("div#ticker ul li")[0].down(0).readAttribute("href");		
		$$("div#ticker ul")[0].hide();
		doTicker();
	}
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ home page flash */
	
	if (($$('body.homepage').length)!=0) {
		var swfArray = new Array();
			swfArray[0] = "Home1.swf";
			swfArray[1] = "Home2.swf";
			swfArray[2] = "Home3.swf";
			swfArray[3] = "Home4.swf";
			swfArray[4] = "Home5.swf";		
		var so = new SWFObject("/sm/swf/" + swfArray[Math.floor(Math.random()*swfArray.length)], "mymovie", "920", "367", "7");
		so.addParam("wmode", "transparent");
		so.write("content");
	}
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ page background adjust */
	if (!isSafari) { pageBackgroundAdjust(); } else { $$('body')[0].addClassName('noBg'); }
	
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ awards/people administrators slider */	
	if (($$('div#sliderWrapper').length)!=0) {
		if ($('sliderWrapper').hasClassName('careers')) {
			sliders(2);
		} else {
			sliders(3);	
		}		
	}
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ careers selector */
	if($('careers-select')) {
		$('careers-select').observe('change', function(event) {
			if(this.value != "") {
				document.location.href = this.value;
			}
		})
		$('careers-select-btn').observe('click', function(event) {
			if($('careers-select').value != "") {
				document.location.href = $('careers-select').value;
			}
		})		
	}
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ check bread crumb length and crop */
	if (($$('div#breadcrumb ul li').length)!=0) {
		$$('div#breadcrumb ul li').each(function(el,s){
			if(s>=2) {
				el.remove();
				$$('div#breadcrumb ul li')[1].addClassName('last');
			}
		});	
	}

}

function windowLoaded() {
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ redoing for IE! */
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ set up some adding of classes to things */	
	if (isIE) {
		setUpClasses();	
	}
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ page background adjust */
	// is jumping in safari
	pageBackgroundAdjust();
	
}

// --------------------------------------------------------------------------------------------------------------
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ application wide functions */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ (remember to test if the elements you are messing with exist) */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ( eg. if (($$('body.homepage'))!=""){ } ) */


// this function search and replaces a string and returns the new string
// http://www.daveshuck.com/blog/index.cfm/2006/12/13/Javascript-examples--removeElement-and-replaceAll
function replaceAll( str, searchTerm, replaceWith, ignoreCase )   {
   var regex = "/"+searchTerm+"/g";
   if( ignoreCase ) regex += "i";
   return str.replace( eval(regex), replaceWith );
}


function setUpClasses() {
	$$('input[type=submit]').invoke('addClassName', 'submit');
	$$('input[type=radio]').invoke('addClassName', 'radio');
	$$('input[type=checkbox]').invoke('addClassName', 'checkBox');
	$$('input[type=image]').invoke('addClassName', 'image');
	$$('input[type=file]').invoke('addClassName', 'file');	
	$$('tr:nth-child(even)').invoke('addClassName', 'even');
	$$('li:nth-child(even)').invoke('addClassName', 'even');	
	$$('li:first-child').invoke('addClassName', 'first');
	$$('li:last-child').invoke('addClassName', 'last');		
}

function showSubscribeForm() {
	var form = $$("div.subscribe form")[0];
	var p1 = $$("div.subscribe p")[0];
	var p2 = $$("div.subscribe p")[1];
	if(form.style.display == 'none') {
		form.show();
		p1.hide();
		p2.show();
	} else {
		form.hide();
		p1.show();
		p2.hide();
	}	
}

function subscriptionDone() {
	var form = $$("div.subscribe form")[0];
	var p1 = $$("div.subscribe p")[0];
	var p2 = $$("div.subscribe p")[1];
	var p3 = $$("div.subscribe p")[2];	
	form.hide();
	p1.hide();
	p2.hide();
	p3.show();
}

// function to do the says "your name" untill you click it and if you dont type anything
function setUpSubscribeBoxes() {
	// hide un wanted para and form
	$$("div.subscribe p")[0].addClassName("first");
	$$("div.subscribe p")[1].hide();
	$$("div.subscribe p")[2].hide();	
	$$("div.subscribe form")[0].hide();	
	// set up some vars
	var $$subscribeName = $$("div.subscribe form input")[0];
	var $$subscribeEmail = $$("div.subscribe form input")[1];	
	// add a class to make it easier to track
	$$subscribeName.addClassName('subscribe-name');
	$$subscribeEmail.addClassName('subscribe-email');
	
	if ($$subscribeName.value == "") {
		$$subscribeName.value = 'Your name';
		$$subscribeName.addClassName('labels');
	}
	if ($$subscribeEmail.value == "") {
		$$subscribeEmail.value = 'Your email';
		$$subscribeEmail.addClassName('labels');
	}
	$$("div.subscribe form input.subscribe-name").invoke('observe', 'focus', 
		function() {
			if ($$subscribeName.value == 'Your name') {
				$$subscribeName.value = '';
				$$subscribeName.removeClassName('labels');
			}	
		}
	);
	$$("div.subscribe form input.subscribe-name").invoke('observe', 'blur', 
		function() {
			if ($$subscribeName.value == '') {
				$$subscribeName.value = 'Your name';
				$$subscribeName.addClassName('labels');
			}	
		}
	);
	$$("div.subscribe form input.subscribe-email").invoke('observe', 'focus', 
		function() {
			if ($$subscribeEmail.value == 'Your email') {
				$$subscribeEmail.value = '';
				$$subscribeEmail.removeClassName('labels');
			}	
		}
	);
	$$("div.subscribe form input.subscribe-email").invoke('observe', 'blur', 
		function() {
			if ($$subscribeEmail.value == '') {
				$$subscribeEmail.value = 'Your email';
				$$subscribeEmail.addClassName('labels');
			}	
		}
	);
	
	
}

	

function doTicker() {	
	
	var stringNow = tickerTextContent.substr(0, tickerCurrent);
	tickerText.update(stringNow);
	tickerText.writeAttribute("href",tickerURL);
	tickerCurrent++;

	if (tickerCurrent > tickerTextContent.length) {
		tickerCurrent = 1;
		changeContent();
		tickerText.up().addClassName("flashing");
		setTimeout("doTicker()", tickerLoopDelay);
	} else {
		tickerText.up().removeClassName("flashing");
		setTimeout("doTicker()", tickerDelay);
	}

}

function changeContent() {
	tickerNewsNum++;
	if (tickerNewsNum > $$("div#ticker ul li").length) {
		tickerNewsNum = 1;
		tickerTextContent = $$("div#ticker ul li")[0].down(0).innerHTML;
		tickerURL = $$("div#ticker ul li")[0].down(0).readAttribute("href");
		tickerTextContent = tickerTextContent.unescapeHTML();
	} else {
		tickerTextContent = $$("div#ticker ul li")[tickerNewsNum-1].down(0).innerHTML;	
		tickerURL = $$("div#ticker ul li")[tickerNewsNum-1].down(0).readAttribute("href");
		tickerTextContent = tickerTextContent.unescapeHTML();
	}	
}



function contactPageFormsX() {
}
function contactPageForms() {
	var swapOutArray = new Array();
	swapOutArray = $$('form.submitEnquiry ol input[type="text"]', 'form.submitEnquiry ol textarea');
	// what to do on blur of the inputs
	swapOutArray.invoke('observe', 'blur',
		function() {
			swapOutArray.each(function(el){
				if (el.value == "") { 
					el.previous().show();
				}
			});
		}
	);
	// tabbed for focus ftw	
	swapOutArray.each(function(el){
		el.observe('focus', function(event) {
			var element = Event.element(event);
			element.previous().hide();
			element.focus();
		});
	});	
	// what to do on click of the labels
	swapOutArray.each(function(el){
		el.previous().observe('click', function(event) {
			var element = Event.element(event);
			element.hide();
			element.next().focus();
		});
	});
}




function pageBackgroundAdjust() {
	
	var bodyElement = $$('body')[0];
	// get height of page
	var footerPos = $('footer').cumulativeOffset()[1];
	var footerHeight = $('footer').getHeight();
	var backgroundPos = footerPos + footerHeight;
	// test cases
	if (bodyElement.hasClassName('bg-cogs')) {
		backgroundPos = backgroundPos - 175;
	}
	if (bodyElement.hasClassName('bg-stones')) {
		backgroundPos = backgroundPos - 231;
	}
	if (bodyElement.hasClassName('deathWithTaxman')) {
		backgroundPos = backgroundPos - 265;
	}
	if (bodyElement.hasClassName('deathEmptyHanded')) {
		backgroundPos = backgroundPos - 265;
	}
	if (bodyElement.hasClassName('bg-lilo')) {
		backgroundPos = backgroundPos - 150;
	}
	if (bodyElement.hasClassName('bg-movingWalkway')){
		backgroundPos = backgroundPos - 280;
	}
	if (bodyElement.hasClassName('bg-fruits')){
		backgroundPos = backgroundPos - 240;
	}
	if (bodyElement.hasClassName('bg-tree')){
		backgroundPos = backgroundPos - 240;
	}
	if (bodyElement.hasClassName('bg-cake')){
		backgroundPos = backgroundPos - 240;
	}
	// construct css selector and insert it
	backgroundPos = "center "+backgroundPos+"px";
	bodyElement.setStyle({ 'backgroundPosition': backgroundPos });
	if (isSafari) { bodyElement.removeClassName('noBg'); }
}




function sliders(slidesVisible) {
	// changes this and you can have as few or as many as you like
	//var slidesVisible = slidesVisible;
	// now passed in when function called on DOM ready
	// the rest just does its thing
	var btnPrevious = $$("div.paginator ul li a")[0];
	var btnNext = $$("div.paginator ul li a")[1];
	var slider = $('sliderInner');
	var sliderLeftPos = 0;
	var distance = $$('div.strip')[0].getWidth() + (replaceAll($$('div.strip')[0].getStyle('margin-right'), "px", "") * 1);
	var sliding = false;
	var btnPreviousActive = true;
	var btnNextActive = true;
	var slidesAmount = $('length').innerHTML*1;	
	
	$('numberFrom').update('1');
	$('numberTo').update(slidesVisible);
	checkButtons();
	
	btnPrevious.observe('click', function(event) {
		if (!sliding && btnPreviousActive) {
			sliding = true;
			$('numberFrom').update(($('numberFrom').innerHTML)*1 - 1);
			$('numberTo').update(($('numberTo').innerHTML)*1 - 1);
			checkButtons();
			new Effect.Move (slider,{ x: distance, y: 0, mode: 'relative', afterFinish: function(){ sliding = false; } });
			Event.stop(event);
		}
	});
	btnNext.observe('click', function(event) {
		if (!sliding && btnNextActive) {
			sliding = true;
			$('numberFrom').update(($('numberFrom').innerHTML)*1 + 1);
			$('numberTo').update(($('numberTo').innerHTML)*1 + 1);
			checkButtons();
			new Effect.Move (slider,{ x: (-1*distance), y: 0, mode: 'relative', afterFinish: function(){ sliding = false; } });
			Event.stop(event);
		}
	});	
	
	function checkButtons() {
		if (slidesAmount < slidesVisible) {
			$('numberTo').update(slidesAmount);	
		}
		
		var from = $('numberFrom').innerHTML*1;
		var to = $('numberTo').innerHTML*1;	
		
		if (from == 1 && to != slidesAmount) {
			btnPreviousActive = false;
			btnPrevious.addClassName('inActive');
			btnNextActive = true;
			btnNext.removeClassName('inActive');
		} else if (from != 1 && to == slidesAmount) {
			btnPreviousActive = true;
			btnPrevious.removeClassName('inActive');
			btnNextActive = false;
			btnNext.addClassName('inActive');
		} else if (from == 1 && to >= slidesAmount) {
			btnPrevious.up().up().addClassName('hide');
		} else {
			btnPreviousActive = true;
			btnPrevious.removeClassName('inActive');
			btnNextActive = true;
			btnNext.removeClassName('inActive');
		}
	}
}