// JavaScript Document
function initSifr(){	
	if(typeof sIFR == "function"){		
		sIFR.replaceElement(named({sSelector:"div.grey h2", sFlashSrc:"/flash/cooperblack.swf", sColor:"#ffffff", sWmode:"transparent",sFlashVars:"textalign=right"}))
		sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"/flash/cooperblack.swf", sColor:"#000000", sWmode:"transparent"}))
		sIFR.replaceElement(named({sSelector:"body#orange div#signupForm h2", sFlashSrc:"/flash/cooperblack.swf", sColor:"#000000", sWmode:"transparent"}))
		sIFR.replaceElement(named({sSelector:"body#yellow div#signupForm h2", sFlashSrc:"/flash/cooperblack.swf", sColor:"#FFFFFF", sWmode:"transparent"}))
		sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"/flash/cooperblack.swf", sColor:"#000000", sWmode:"transparent", sFlashVars:"textalign=right"}))
	}
}

String.prototype.trim = function() {
    var str = this;
    
    for(var i=0; i<this.length; i++)
        if(this[i] == ' ')
            str = str.replace(' ', '');

    return str;
}

function showToolTip(el){
	if($('tooltip').visible() == false){
		var position = Position.cumulativeOffset(el);		
		position[0] = position[0] - 17;
		position[1] = position[1] - 46;
		$('tooltip').setStyle({
			'left': position[0]+'px',
			'top': position[1]+'px'
		});
		$('tooltip').show();
	}
}

function hideToolTip(){
	$('tooltip').hide();
}

function submitForm(){

	var tmpContactFormSerialized = $("signupForm-form").serialize(false);
	new Ajax.Request("/ajax/addmail.ajax.php", 
	{
		method:"post", 
		postBody: tmpContactFormSerialized,
		onComplete:	function(transport){
			
			// Store the error array
			var error = transport.responseText.split(",");
			var html = "";
			
			// Check if there where any errors
			if (error.length < 1)
			{
				// Clear all errors
				$("name").className = "";
				$("email").className = "";
				$("check").className = "";
			}
			else if (error[0] == "OK_NL")
			{
				// Succes text
				html += "<span>";
				html += "<p>";
				html += "De aanmelding is ontvangen, ga lekker achterover hangen en relax, vanaf nu druppelt al het Monsternieuws automatisch je inbox binnen.<br/>";
				html += "</p>";
				html += "</span>";
				$("signupForm-content").innerHTML = html;
				
				// Hide the button
				$("submitForm").style.display = "none";
			}
			else if (error[0] == "OK_US")
			{
				// Succes text
				html += "<span>";
				html += "<p>";
				html += "Your subscription has been received, just sit back and relax, from now on we will send you the latest Monsternews right to your inbox.<br/>";
				html += "</p>";
				html += "</span>";
				$("signupForm-content").innerHTML = html;
				
				// Hide the button
				$("submitForm").style.display = "none";
			}
			else 
			{
				// Clear all errors
				$("name").className = "";
				$("email").className = "";
				$("check").className = "";
				
				// Loop through the arrays
				for (var i = 0; i < error.length; i++)
				{
					if (error[i] == "name") $("name").className = "error";
					if (error[i] == "email") $("email").className = "error";
					if (error[i] == "check") $("check").className = "error";
				}
			}
		}
	});		
}

function nextImage(el){
	var media_id = el.id.split('_')[1];
	media_id++;
	
	if($('image_' + media_id)){
		changeImage($('image_' + media_id));		
	}else{
		//el.up();
		var parent = el.up();
		var container = parent.next();
		var element = container.down('a');
		
		changeImage(element);
	}
}

function changeImage(el){
	if(!$(el.id).hasClassName('current')){
		
		var media_id = el.id.split('_')[1];
		
		//Check where the big media is connected to the thumbnail
		var bigMedia = $('next_' + media_id);
		var ancestors = bigMedia.ancestors();
		var containerElement = ancestors[0];		
		var containerOffset = Position.cumulativeOffset(ancestors[1]);
		var mediaOffset = Position.cumulativeOffset(bigMedia);
		var movement = mediaOffset[0] * -1;		
		movement = movement + containerOffset[0];		
		new Effect.Move(containerElement,{x:movement, y:0, mode:'relative', duration:0, queue:'end'});
		
		//Comment inladen
		var textMedia = $('caption_' + media_id);
		var textAncestors = textMedia.ancestors();
		var textContainerElement = textAncestors[0];
		var textContainerOffset = Position.cumulativeOffset(textAncestors[1]);
		var textOffset = Position.cumulativeOffset(textMedia);
		var textMovement = textOffset[0] * -1;		
		textMovement = textMovement + textContainerOffset[0];
		new Effect.Move(textContainerElement,{x:textMovement, y:0, mode:'relative', duration:0, queue:'end'});
		
		// Active van item afhalen
		var listItems = el.up(1);
		var currentItems = listItems.getElementsByTagName('li');
		for (var index = 0; index < currentItems.length; index++) {
			var item = currentItems[index];
			item.className = "";
		}
		
		// Active class item toevoegen
		el.up().className = "active";
	}
}

function init(){
	var emails = document.getElementsByClassName('email');
	for(var i=0; i < emails.length; i++) {
		var email = emails[i].innerHTML;
		email = email.trim();
		email = email.replace('[replace_with_at]', '@');
		email = email.replace('[replace_with_dot]', '.');
		email = email.replace('[replace_with_com]', 'com');
		email = email.replace('[replace_with_nl]', 'nl');
		email = email.replace(' ', '');
		emails[i].innerHTML = email;
		emails[i].href = 'mailto:'+email;
	}	
}

Event.observe(window, "load", function(){
	initSifr();	
	Behaviour.register(MonsterRules);
	Behaviour.apply();
	init();
	
});