/* ======== Animations ======== */

var IMAGE_FADE_SPEED = 200;
var NAVIGATION_FADE_SPEED = 200;
var TEASER_NAVIGATION_FADE_SPEED = 200;
var TEASER_BOX_SLIDE_SPEED = 600;
var TEASER_BOX_WIDTH = 980;
var TEASER_BOX_AUTOSELECT_TIMER = 4500;


/* ======== Variables ======== */
var selectedTeaserBox = 0;
var autoSelectTeaserBox = true;
var teaserBoxAutoSelectTimer = null;

/* ======== JQuery Addons ======== */
(function($) {
	$.fn.customFadeTo = function(speed, opacity, callback) {
		$(this).fadeTo(speed, opacity, function() {
			if(opacity == 1 && jQuery.browser.msie) $(this).get(0).style.removeAttribute("filter");
			if(callback != undefined) callback();
		});
	};
})(jQuery);


/* ======== Section Functions ======== */

function selectTeaserBox(index) {
	// Highlight button
	selectedTeaserBox = index;
	
	// Get elements
	var dot = $("img.teaser_navigation_dot").eq(index);
	var box = $("div.teaser_box").eq(index);
	
	// Fade in the dots accordingly
	dot.stop().fadeTo(200, 1.0);
	$("img.teaser_navigation_dot").not(dot).stop().fadeTo(200, 0.6);
	
	// Slide in the teaser box
	box.parent().stop().animate({ marginLeft: -(index*TEASER_BOX_WIDTH)+"px" }, TEASER_BOX_SLIDE_SPEED);
}

/* ======== DOM Ready ======== */

$(document).ready(function(){

	// Nerves credits
	if(!jQuery.browser.msie) {
		$("div.designbynerves").fadeTo(0, 0.6);
		$("div.designbynerves").hover(function() {
			$(this).stop().fadeTo(400, 1.0);
		},function() {
			$(this).stop().fadeTo(400, 0.6);
		});
	}
	
	// Navigation
	/*$("img.navigation").hover(function() {
		$(this).stop().fadeTo(NAVIGATION_FADE_SPEED, 0.6);
	},function() {
		$(this).stop().fadeTo(NAVIGATION_FADE_SPEED, 1.0);
	});*/
	
	// Logo
	//$("div.header_logo").hover(function() {
	//	$(this).stop().fadeTo(NAVIGATION_FADE_SPEED, 0.4);
	//},function() {
	//	$(this).stop().fadeTo(NAVIGATION_FADE_SPEED, 0.0);
	//});
	
	// Teaser box hover
	$("div.teaser_box").hover(function() {
		$(this).find("img.teaser_box_image_colour").stop().fadeTo(IMAGE_FADE_SPEED, 1.0);
	},function() {
		$(this).find("img.teaser_box_image_colour").stop().fadeTo(IMAGE_FADE_SPEED, 0.0);
	});
	
	// Logo hover
	$("div.page_sidebar_box_socialmedia_logo_wrapper").hover(function() {
		$(this).find("div.page_sidebar_box_socialmedia_logo_highlight").stop().fadeTo(IMAGE_FADE_SPEED, 1.0);
	},function() {
		$(this).find("div.page_sidebar_box_socialmedia_logo_highlight").stop().fadeTo(IMAGE_FADE_SPEED, 0.0);
	});
	
	// Teaser navigation
	$("img.teaser_navigation_dot").click(function() {
		// Get the index of the dot and select that teaser
		var dotIndex = $("img.teaser_navigation_dot").index(this);
		selectTeaserBox(dotIndex);
		clearInterval(teaserBoxAutoSelectTimer);
	});
	$("img.teaser_navigation_dot").hover(function() {
		var dotIndex = $("img.teaser_navigation_dot").index(this);
		if(dotIndex != selectedTeaserBox) $(this).stop().fadeTo(TEASER_NAVIGATION_FADE_SPEED, 1.0);
	},function() {
		var dotIndex = $("img.teaser_navigation_dot").index(this);
		if(dotIndex != selectedTeaserBox) $(this).stop().fadeTo(TEASER_NAVIGATION_FADE_SPEED, 0.6);
	});
	
	// Thumbnails hover
	$("div.thumbnails_box").hover(function() {
		$(this).find("img.thumbnails_box_image_colour").stop().fadeTo(IMAGE_FADE_SPEED, 1.0);
		$(this).find("div.thumbnails_box_meta_highlight").stop().fadeTo(IMAGE_FADE_SPEED, 1.0);
	},function() {
		$(this).find("img.thumbnails_box_image_colour").stop().fadeTo(IMAGE_FADE_SPEED, 0.0);
		$(this).find("div.thumbnails_box_meta_highlight").stop().fadeTo(IMAGE_FADE_SPEED, 0.0);
	});
	
	// Listing hover
	$("div.listing_box").hover(function() {
		$(this).find("img.listing_box_image_colour").stop().fadeTo(IMAGE_FADE_SPEED, 1.0);
		$(this).find("div.listing_box_meta_highlight").stop().fadeTo(IMAGE_FADE_SPEED, 1.0);
	},function() {
		$(this).find("img.listing_box_image_colour").stop().fadeTo(IMAGE_FADE_SPEED, 0.0);
		$(this).find("div.listing_box_meta_highlight").stop().fadeTo(IMAGE_FADE_SPEED, 0.0);
	});
	
	// Sidebar hover
	$("div.sidebar_box").hover(function() {
		$(this).find("img.sidebar_box_image_colour").stop().fadeTo(IMAGE_FADE_SPEED, 1.0);
		$(this).find("div.sidebar_box_meta_highlight").stop().fadeTo(IMAGE_FADE_SPEED, 1.0);
	},function() {
		$(this).find("img.sidebar_box_image_colour").stop().fadeTo(IMAGE_FADE_SPEED, 0.0);
		$(this).find("div.sidebar_box_meta_highlight").stop().fadeTo(IMAGE_FADE_SPEED, 0.0);
	});
	
	// Sidebar text hover
	$("div.page_sidebar_box_text_wrapper").hover(function() {
		$(this).find("div.page_sidebar_box_text_highlight").stop().fadeTo(IMAGE_FADE_SPEED, 1.0);
	},function() {
		$(this).find("div.page_sidebar_box_text_highlight").stop().fadeTo(IMAGE_FADE_SPEED, 0.0);
	});
	
	// Initial state
	selectTeaserBox(0);
	
	// Teaser box auto select timer
	teaserBoxAutoSelectTimer = setInterval(function(){
		var newIndex = selectedTeaserBox + 1;
		if(newIndex >= $("div.teaser_box").length) newIndex = 0;
		selectTeaserBox(newIndex);
	}, TEASER_BOX_AUTOSELECT_TIMER);
	
});









/* ======== E-Mail Protection ======== */

var tld_ = new Array()
tld_[0] = "com";
tld_[1] = "org";
tld_[2] = "net";
tld_[3] = "ws";
tld_[4] = "info";
tld_[10] = "co.uk";
tld_[11] = "org.uk";
tld_[12] = "gov.uk";
tld_[13] = "ac.uk";
tld_[14] = "ch";
var topDom_ = 14;
var m_ = "mailto:";
var a_ = "@";
var d_ = ".";

function mail(name, dom, tl, params)
{
	var s = e(name,dom,tl);
	document.write('<a href="'+m_+s+params+'">'+s+'</a>');
}
function mail2(name, dom, tl, params, display)
{
	document.write('<a href="'+m_+e(name,dom,tl)+params+'">'+display+'</a>');
}
function e(name, dom, tl)
{
	var s = name+a_;
	if (tl!=-2)
	{
		s+= dom;
		if (tl>=0)
			s+= d_+tld_[tl];
	}
	else
		s+= swapper(dom);
	return s;
}
function swapper(d)
{
	var s = "";
	for (var i=0; i<d.length; i+=2)
		if (i+1==d.length)
			s+= d.charAt(i)
		else
			s+= d.charAt(i+1)+d.charAt(i);
	return s.replace(/\?/g,'.');
}








/* ======== Styled Checkboxes... ======== */

/*

Created by Ryan Fait
www.ryanfait.com

The only things you may need to change in this file are the following
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)

The numbers you set for checkboxHeight and radioHeight should be one quarter
of the total height of the image want to use for checkboxes and radio
buttons. Both images should contain the four stages of both inputs stacked
on top of each other in this order: unchecked, unchecked-clicked, checked,
checked-clicked.

You may need to adjust your images a bit if there is a slight vertical
movement during the different stages of the button activation.

The value of selectWidth should be the width of your select list image.

Visit http://ryanfait.com/ for more information.

*/

var checkboxHeight = "16";
var radioHeight = "16";
var selectWidth = "273";


/* No need to change anything after this */


document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
	init: function() {
		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		for(a = 0; a < inputs.length; a++) {
			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.indexOf("styled") != -1) {
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;

				if(inputs[a].checked == true) {
					if(inputs[a].type == "checkbox") {
						position = "0 -" + (checkboxHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					} else {
						position = "0 -" + (radioHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					}
				}
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.clear;
				if(!inputs[a].getAttribute("disabled")) {
					span[a].onmousedown = Custom.pushed;
					span[a].onmouseup = Custom.check;
				} else {
					span[a].className = span[a].className += " disabled";
				}
			}
		}
		inputs = document.getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className.indexOf("styled") != -1) {
				
				option = inputs[a].getElementsByTagName("option");
				//active = option[0].childNodes[0].nodeValue;
				active = inputs[a].value;
				textnode = document.createTextNode(active);
				for(b = 0; b < option.length; b++) {
					if(option[b].selected == true) {
						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
					}
				}
				span[a] = document.createElement("span");
				span[a].className = "select";
				span[a].id = "select" + inputs[a].name;
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				if(!inputs[a].getAttribute("disabled")) {
					inputs[a].onchange = Custom.choose;
				} else {
					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
				}
			}
		}
		document.onmouseup = Custom.clear;
	},
	pushed: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
		} else if(element.checked == true && element.type == "radio") {
			this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
		} else if(element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
		} else {
			this.style.backgroundPosition = "0 -" + radioHeight + "px";
		}
	},
	check: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		} else {
			if(element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else {
				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				group = this.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				for(a = 0; a < inputs.length; a++) {
					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			element.checked = true;
		}
	},
	clear: function() {
		inputs = document.getElementsByTagName("input");
		for(var b = 0; b < inputs.length; b++) {
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className.indexOf("styled") != -1) {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else if(inputs[b].type == "checkbox" && inputs[b].className.indexOf("styled") != -1) {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className.indexOf("styled") != -1) {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && inputs[b].className.indexOf("styled") != -1) {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose: function() {
		option = this.getElementsByTagName("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	}
}
window.onload = Custom.init;