/* DESIGNATURE 2009 
All Rights Reserved
For use contact simon@rosmi.dk
*/

$(document).ready(function(){
	var contactEmail = "kontakt@designature.dk";
	
	/* E-Mail masking */
        $(".emailmask").text(contactEmail);
        $(".emailmask").attr({href: "mailto:"+contactEmail});


	/* CONTACT FORM */
	
	// Round corners
	if($.browser.msie){
		//IE sucks so we can't round corners on our contact form
	}else{
		$(".kontakt-form input, textarea").corner("4px"); // Round contact form corners
	}
	
	// Validator
	var navn, email, telefon, besked;
	
	$(".textfield").blur(function(){
		if($(this).attr("id") == "navn"){ // If focus removed from the "navn" field
			if($(this).val() != "" && $(this).val().indexOf(" ") > 0){ // check if something is written in the field and that it contains a space
				$(this).animate({backgroundColor:"#DFFFE4"},'slow'); // if true, animate the background color to a light green
				navn = true; // for checking validated fields, set "navn" to true
			}else{ // If not validated
				$(this).animate({backgroundColor:"#FFCECF"},'slow'); // animate the background color to a light red
				navn = false; // for checking validated fields, set "navn" to false
			}
		}else if($(this).attr("id") == "email"){ // If focus removed from the "email" field
			if($(this).val() != "" && $(this).val().indexOf("@") >= 2 && $(this).val().indexOf(".") > 4){ // check if something is written in the field and that it contains a "@" and a "." at least two and four characters in
				$(this).animate({backgroundColor:"#DFFFE4"},'slow'); // if true animate the background color to a light green
				email = true; // for checking validated fields, set "email" to true
			}else{ // If not validated
				$(this).animate({backgroundColor:"#FFCECF"},'slow'); // animate the backgorund color to a light red
				email = false; // for checking validated fields, set "email" to false
			}
		}else if($(this).attr("id") == "telefon"){ // If focus removed from the "telefon" field
			if($(this).val() != ""){
				if($(this).val().length >= 8){ // check that something is written in the field and that it's at least eight characters long
					$(this).animate({backgroundColor:"#DFFFE4"},'slow'); // If true animate the background color to a light green
					telefon = true; // for checking validated fields, set "telefon" to true
				}else{ // if not validated
					$(this).animate({backgroundColor:"#FFCECF"},'slow'); // animate the background color to a light red
					telefon = false; // for checking validated fields, set "telefon" to false
				}
			}else{
				$(this).animate({backgroundColor:"#DFFFE4"},'slow'); // If nothing is written, make it green as phone isn't required
				telefon = true; // for checking validated fields, set "telefon" to true
			}
		}else if($(this).attr("id") == "besked"){ // If focus removed from the "besked" field
			if($(this).val() != "" && $(this).val().length >= 20){ // check that at least 20 characters is written in the textarea
				$(this).animate({backgroundColor:"#DFFFE4"},'slow'); // If true animate the background color to a light green
				besked = true; // for checking validated fields, set "besked" to true
			}else{ // If not validated
				$(this).animate({backgroundColor:"#FFCECF"},'slow'); // animate the background color to a light red
				besked = false; // for checking validated fields, set "besked" to false
			}
		}
	});
	
	// Submit form
	$("#send").click(function(){ // When the "send" button is clicked, run the following ajax function
		if(navn===true && email===true && telefon===true && besked===true){ // If all fields are valid
			$.ajax({
				url: "send_besked.php?navn=" + $("#navn").val() + "&email=" + $("#email").val() + "&telefon=" + $("#telefon").val() + "&besked=" + $("#besked").val() + "&captcha=" + $("#captcha").val(), // send the url through with parameters from the form.
				cache: false, // don't cache, in case same message sent more times
				success: function(html){ // When the form is sucessfully submitted, return function
					if(html != "error"){ // if no error returned from the ASP page
						$("#form").fadeOut('normal',function(){ // fade out the form div
							$("#sent").fadeIn('normal'); // fade in the sent message div
						});
					}else{ // If error returned from the ASP page warn the user
						alert("Der forekom en uventet fejl. Prøv venligst igen senere.");
					}
				}
			});
		}else{ // if the form isn't validated warn the user
			alert("Du skal udfylde alle felter korrekt");
		}
	});
	
	$("#telefon").numeric(); // Makes sure that only numbers and "+" goes into the field (see jquery.numeric.js)

	
	
	/* ROUND CORNERS */
	
	$("#nav").corner("3px"); // round corners on the navigation (see jquery.coner.js)
	$("#footer-info").corner("3px"); // round corners on the footer (see jquery.coner.js)
	$("#footer-info-twitter").corner("3px"); // round corners on the twitter footer (see jquery.coner.js)
	
	/* Enable target="_blank" for links with class="external" */
	
	$("a.external").attr("target","_blank");
	
	
	
	/* SLIDE FUNCTION */
	
	var totalFrames,currentFrame,frames;
	slideTimer = setTimeout(autoslide,6500); // Start the autoslide function used on the frontpage. This slides the div's sideways without spoiling the horizontal slide function.
	totalFrames = $("#forside .slideHolder").children().length; // Find the number of slides
	currentFrame = 1; // start at slide 1
	
	
	// Add slide navigation
	for(frames=1; frames <= totalFrames; frames++){ // loop function "totalFrames" times
		$("#slidenav").append("<div class=\"navdiv\" id=\"slidenavid_"+frames+"\"><img src=\"images/dne_slidenav01.png\" class=\"slidenavimg\" /></div>"); // add slide navigation div
	}
	
	$(".slidenavimg").css({display:"none"});
	if($.browser.msie){ // IE can't handle png's properly so we do a normal display:block for IE
		$("#slidenavid_1").find("img").css({display:"block"});
	}else{ // All other browser are okay, so we let them get the fade effect
		$("#slidenavid_1").find("img").fadeIn('normal');
	}
	
	// Frontpage slide function
	function autoslide(){
		if(currentFrame == totalFrames){ // if we're on the last frame
			$(".slideHolder").animate({left:"0px"},1000); // go to the first frame
			currentFrame = 1; // set the current frame to 1 as it is the first frame
		}else{ // if we're not on the last frame
			$(".slideHolder").animate({left:($(".slideHolder").position().left - 900)},1000); // animate to the next frame
			currentFrame = currentFrame + 1; // change current frame to the next frame
		}
		if($.browser.msie){ // IE can't handle png's properly so we do a normal display:none and display:block for IE
			$(".slidenavimg").css({display:"none"});
			$("#slidenavid_"+currentFrame).find("img").css({display:"block"});
		}else{ // All other browser are okay, so we let them get the fade effect
			$(".slidenavimg").fadeOut('slow');
			$("#slidenavid_"+currentFrame).find("img").fadeIn('slow');
		}
		slideTimer = setTimeout(autoslide,6500); // set the slideTimer to do the next slide in 11 seconds (time in milliseconds)
	}
	
	// Slide navigation click
	$(".navdiv").click(function(){
		window.clearTimeout(slideTimer); // clear the slideTimer to make sure the slide doesn't move
		navId = $(this).attr("id").split("_"); // get the id of the clicked element and split at "_"
		gotoSlide = navId[1]; // get the last bit of the id (a number) representing which slide to move to
		currentFrame = gotoSlide-1; // make sure the current frame is one less than the gotoSlide
		$(".slideHolder").animate({left:-(currentFrame*900)}); // animate to the selected frame
		if(currentFrame == totalFrames){ // if the current frame is the last frame
			currentFrame = 1; // set the current frame to 1
		}else{ // if we're not on the last frame
			currentFrame = currentFrame+1; // change the current frame to the next frame
		}
		if($.browser.msie){ // IE can't handle png's properly so we do a normal display:none and display:block for IE
			$(".slidenavimg").css({display:"none"});
			$("#slidenavid_"+currentFrame).find("img").css({display:"block"});
		}else{ // All other browser are okay, so we let them get the fade effect
			$(".slidenavimg").fadeOut('slow');
			$("#slidenavid_"+currentFrame).find("img").fadeIn('slow');
		}
		slideTimer = setTimeout(autoslide,30000); // set the skudeTimer to do the next slide in 30 seconds (time in milliseconds)
	});
	
	
	
	/* MENU */
	
	$("#nav").find("li a").click(selectNav); // When a link is clicked in the menu
	
	// When a link is cliced
	function selectNav(){ 
		if($(this).text() != "Forside"){ // if clicking away from the frontpage
			if($.browser.msie){ // IE can't handle png's properly so we do a normal display:none for IE
				$(".navdiv").css({display:"none"}); // hide the fronpage navigation panel
			}else{ // All other browser are okay, so we let them get the fade effect
				$(".navdiv").fadeOut('medium'); // hide the fronpage navigation panel
			}
		}else{ // if clicking to the frontpage
			if($.browser.msie){ // IE can't handle png's properly so we do a normal display:block for IE
				$(".navdiv").css({display:"block"}); // show the frontpage navigation panel
			}else{ // All other browser are okay, so we let them get the fade effect
				$(".navdiv").fadeIn('medium'); // show the frontpage navigation panel
			}
			$(".slidenavimg").css({display:"none"});
			$("#slidenavid_"+currentFrame).find("img").css({display:"block"});
		}
		$(this).parents("ul").find("a").removeClass("selected"); // find all the links and remove the class "selected"
		$(this).addClass("selected"); // Apply the class selected to the cliced link
		document.title="Designature - " + $(this).text(); // Change the <title></title> tag value for the browser title to change
	}
	
	// Trigger function called when page first loaded and a # is found in the URL
	function trigger(data){ 
		var el = $("#nav li").find('a[href$="'+data.id+'"]').get(0); // get the text just after the # in the URL to find the frame to scroll to
		selectNav.call(el); // Go to the clicked link function for the link found in the URL
	}
	
	// When the document loads, check for a hash in the URL
	if(window.location.hash){ 
		if(window.location.hash.substr(1) != "forside"){
			if($.browser.msie){ // IE can't handle png's properly so we do a normal display:block for IE
				$(".navdiv").css({display:"block"}); // show the frontpage navigation panel
			}else{ // All other browser are okay, so we let them get the fade effect
				$(".navdiv").fadeIn('medium'); // show the frontpage navigation panel
			}
			$(".slidenavimg").css({display:"none"});
			$("#slidenavid_"+currentFrame).find("img").css({display:"block"});
		}
		trigger({id:window.location.hash.substr(1)}); // if a hash is found, go to the trigger function
	}else{
		$("#nav li:first a").click(); // If no hash found, click the first link in the #nav menu
	}
	
	// Set variables for the scroll function
	var $panels = $("#container > div"); // The panels
	var $container = $("#content"); // The container
	var $scroll = $("#content"); // The scroll target
		
	//Options for scroll (see scrollTo, serialScroll and localScroll documentation)
	var scrollOptions = {
		target:$scroll,
		items:$panels,
		navigation: '#nav li a',
		axis:'yx',
		easing:'swing',
		duration:800,
		onAfter:trigger,
		queue:true
	};
	
	$("#content").serialScroll(scrollOptions); // apply the serialScroll to the #content div
	$.localScroll(scrollOptions);
	
	scrollOptions.duration = 1;
	$.localScroll.hash(scrollOptions);
	
	
	
	/* PORTFOLIO */
	
	$(".portnav-h:first").css({"display":"block"});
	
	$(".portfolio-nav .portnav").click(function(){
		var goto;
		goto = $(this).find("img").attr("id").split("_");
		if(goto[1] != $("#currentProject").val()){
			$("#portfolio-content").fadeOut('slow',function(){
				$.ajax({
						url: "getProjects.php?id="+goto[1], // send the url through with parameters from the form.
						cache: false, // don't cache, in case same message sent more times
						success: function(html){ // When the form is sucessfully submitted, return function
							$("#portfolio-content").html(html);
							$("#portfolio-content").fadeIn('slow');
						}
				});
			});
			$(".portfolio-nav .portnav").find("img").fadeOut('fast');
			$(this).find("img").fadeIn('normal');
		}
	});
	
	$("#portfolio-content").fadeOut('normal',function(){
		$.ajax({
				url: "getProjects.php", // send the url through with parameters from the form.
				cache: false, // don't cache, in case same message sent more times
				success: function(html){ // When the form is sucessfully submitted, return function
					$("#portfolio-content").html(html);
					$("#portfolio-content").fadeIn('normal');
				}
		});
	});
	
	
	
});