/********** main nav flyout **********/

// declare menu width
browser_width = $(window).width() - 43;
// declare menu margin
browser_margin = 14 - browser_width;

$(function() {
 	$('#main_nav').hover(
  		function () {
   			$('li',$(this)).stop().animate({'marginLeft':'0px'},200);
  		},
  		function () {
   			$('li',$(this)).stop().animate({'marginLeft':browser_margin},200);
  		}	
	);
});

$(function() {
 	$('#main_nav').stop().animate({'marginLeft':'0px'},1000);
	
	// set menu width
	$('#main_nav li').css({width:browser_width, marginLeft:browser_margin});
 	
	$('#main_nav').hover(
  		function () {
   			$('li',$(this)).stop().animate({'marginLeft':'0px'},200);
  		},
  		function () {
   			$('li',$(this)).stop().animate({'marginLeft':browser_margin},200);
  		}
 	);
});


/********** sliding content **********/
function resizePanel() {
	// get the browser width and height
	width = $(window).width();
	height = $(window).height();

	// get the mask width: width * total of items
	mask_width = width * $('.item').length;
		
	// set the dimension	
	$('#wrapper, .item').css({width: width, height: height});
	$('#mask').css({width: mask_width, height: height});
	
	// if the item is displayed incorrectly, set it to the corrent pos
	$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}


/********** custom functions **********/

// hide all news
function hide_news() {
	$('#news_1').hide();
	$('#news_2').hide();
	$('#news_3').hide();
	$('#news_4').hide();
	$('#news_5').hide();
	$('#news_6').hide();
	$('#news_7').hide();
	$('#news_8').hide();
	$('#news_9').hide();
}

// hide all thumbnails
function hide_thumbnails() {
	$('#thumbnails_1').hide();
	$('#thumbnails_2').hide();
}

// hide all works
function hide_works() {
	$('#work_1').hide();
	$('#work_2').hide();
	$('#work_3').hide();
	$('#work_4').hide();
	$('#work_5').hide();
	$('#work_6').hide();
	$('#work_7').hide();
	$('#work_8').hide();
}

// form validations
function validateInputs() {
    var fields  = new Array('name', 'email', 'message');
    var success = true;
    
    for(var i = 0; i < fields.length; i++) {
        if(document.getElementById(fields[i]).value == "") {
            // show error
            document.getElementById(fields[i]+'_error').style.display = 'block';
            
            if(!validateEmail()) {
                success = false;
            }
            success = false;
        }
        else {
            // hide error
            document.getElementById(fields[i]+'_error').style.display = 'none';
            success = true;
            
            // check if email is valid
            if(!validateEmail()) {
                success = false;
            }
        }
    }
    return success;
}

function validateName() {
	if (document.getElementById('name').value.length < 1) {
		document.getElementById('name_error').style.display = 'block';
	}
	else {
		document.getElementById('name_error').style.display = 'none';
	}
}

function validateNum() {
    var value = document.getElementById('phone').value;
    var error = false;
    
    if(value == 0 || parseInt(value)) {
        if(Math.round(value)) {
            document.getElementById('phone').value = value;
        }
        else {
            if(value == 0) {
                document.getElementById('phone').value = value;
            }
            else {
                // string detected!
                document.getElementById('phone').value = '';
            }
        }
    }
    else {
        // string detected!
        document.getElementById('phone').value = '';
    }
}

function validateEmail() {
    var ele     = document.getElementById('email').value;
    var invalid = false;
    
    if(ele != "") {
        if(ele.indexOf("@") < 1) { 
            //  must contain @, and it must not be the first character
            invalid = true;
        } 
        else if(ele.lastIndexOf(".") <= ele.indexOf("@")) {  
            // last dot must be after the @
            invalid = true;
        } 
        else if(ele.lastIndexOf("@") == ele.length-1) {  
            // @ must not be the last character
            invalid = true;
        } 
        else if(ele.lastIndexOf(".") == ele.length-1) {  
            // . must not be the last character
            invalid = true;
        }
        
        if(invalid == true) {
            document.getElementById('email_error').style.display = 'block';
            document.getElementById('email_error').innerHTML = '<div class=\'error_left\'></div><div class=\'error_center\'>*Invalid email</div><div class=\'error_right\'></div>';
            return false;
        }
        else {
            document.getElementById('email_error').style.display = 'none';
            return true;
        }
    }
    else {
        document.getElementById('email_error').style.display = 'block';
        document.getElementById('email_error').innerHTML = '<div class=\'error_left\'></div><div class=\'error_center\'>*Compulsory field</div><div class=\'error_right\'></div>';
        return false;
    }
}

function validateMessage() {
	if (document.getElementById('message').value.length < 1) {
		document.getElementById('message_error').style.display = 'block';
	}
	else {
		document.getElementById('message_error').style.display = 'none';
	}
}


/********** animate footer **********/

// animate clouds
var scrollSpeed = 70;
var step = 1;
var current_pos = 0;

var restartPosition = 0;

function scrollBg(){
	current_pos -= step;
	if (current_pos == restartPosition){
		current_pos = 0;
	}

	$('#clouds').css("background-position",current_pos+"px 0");
}


/********** footer **********/
browser_height = $(window).height();


/********** on document ready **********/
$(document).ready(function(){  
	
	// if browser height is too short
	if(browser_height < 800) {
		// push footer to bottom
		$('#footer').css({top:750});
	}
		
	// get all link with class panel
	$('a.panel').click(function () {

        // reset and highlight the clicked link
		$('a.panel').removeClass('selected');
		$(this).addClass('selected');
		
		// grab the current item, to be used in resize function
		current = $(this);
		
        // scroll it to the destination
		$('#wrapper').scrollTo($(this).attr('href'), 800);		
		
        // cancel the link default behavior
		return false;
	});

	// resize all the items according to the new browser size
	$(window).resize(function () {
		// call the resizePanel function
		resizePanel();
	});
	
	// initiate captions
	$('.boxgrid.slidedown').hover(function(){
		$(".cover", this).stop().animate({top:'-241px'},{queue:false,duration:300});
	}, function() {
		$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
	});
	
	// news functions
	$("#nav_news_1").click(function() {
		// clear selected class
		$("#nav_news_1 div").removeClass('page_unselected');
		// highlight this nav item
		$("#nav_news_1 div").addClass('page_selected');
		$("#nav_news_2 div").addClass('page_unselected');
		$("#nav_news_3 div").addClass('page_unselected');
		$("#nav_news_4 div").addClass('page_unselected');
		$("#nav_news_5 div").addClass('page_unselected');
		$("#nav_news_6 div").addClass('page_unselected');
		$("#nav_news_7 div").addClass('page_unselected');
		$("#nav_news_8 div").addClass('page_unselected');
		$("#nav_news_9 div").addClass('page_unselected');
		hide_news();
		$('#news_1').fadeIn('slow');
	});
	
	$("#nav_news_2").click(function() {
		// clear selected class
		$("#nav_news_2 div").removeClass('page_unselected');
		// highlight this nav item
		$("#nav_news_1 div").addClass('page_unselected');
		$("#nav_news_2 div").addClass('page_selected');
		$("#nav_news_3 div").addClass('page_unselected');
		$("#nav_news_4 div").addClass('page_unselected');
		$("#nav_news_5 div").addClass('page_unselected');
		$("#nav_news_6 div").addClass('page_unselected');
		$("#nav_news_7 div").addClass('page_unselected');
		$("#nav_news_8 div").addClass('page_unselected');
		$("#nav_news_9 div").addClass('page_unselected');
		hide_news();
		$('#news_2').fadeIn('slow');
	});
	
	$("#nav_news_3").click(function() {
		// clear selected class
		$("#nav_news_3 div").removeClass('page_unselected');
		// highlight this nav item
		$("#nav_news_1 div").addClass('page_unselected');
		$("#nav_news_2 div").addClass('page_unselected');
		$("#nav_news_3 div").addClass('page_selected');
		$("#nav_news_4 div").addClass('page_unselected');
		$("#nav_news_5 div").addClass('page_unselected');
		$("#nav_news_6 div").addClass('page_unselected');
		$("#nav_news_7 div").addClass('page_unselected');
		$("#nav_news_8 div").addClass('page_unselected');
		$("#nav_news_9 div").addClass('page_unselected');
		hide_news();
		$('#news_3').fadeIn('slow');
	});
	
	$("#nav_news_4").click(function() {
		// clear selected class
		$("#nav_news_4 div").removeClass('page_unselected');
		// highlight this nav item
		$("#nav_news_1 div").addClass('page_unselected');
		$("#nav_news_2 div").addClass('page_unselected');
		$("#nav_news_3 div").addClass('page_unselected');
		$("#nav_news_4 div").addClass('page_selected');
		$("#nav_news_5 div").addClass('page_unselected');
		$("#nav_news_6 div").addClass('page_unselected');
		$("#nav_news_7 div").addClass('page_unselected');
		$("#nav_news_8 div").addClass('page_unselected');
		$("#nav_news_9 div").addClass('page_unselected');
		hide_news();
		$('#news_4').fadeIn('slow');
	});
	
	$("#nav_news_5").click(function() {
		// clear selected class
		$("#nav_news_5 div").removeClass('page_unselected');
		// highlight this nav item
		$("#nav_news_1 div").addClass('page_unselected');
		$("#nav_news_2 div").addClass('page_unselected');
		$("#nav_news_3 div").addClass('page_unselected');
		$("#nav_news_4 div").addClass('page_unselected');
		$("#nav_news_5 div").addClass('page_selected');
		$("#nav_news_6 div").addClass('page_unselected');
		$("#nav_news_7 div").addClass('page_unselected');
		$("#nav_news_8 div").addClass('page_unselected');
		$("#nav_news_9 div").addClass('page_unselected');
		hide_news();
		$('#news_5').fadeIn('slow');
	});
	
	$("#nav_news_6").click(function() {
		// clear selected class
		$("#nav_news_6 div").removeClass('page_unselected');
		// highlight this nav item
		$("#nav_news_1 div").addClass('page_unselected');
		$("#nav_news_2 div").addClass('page_unselected');
		$("#nav_news_3 div").addClass('page_unselected');
		$("#nav_news_4 div").addClass('page_unselected');
		$("#nav_news_5 div").addClass('page_unselected');
		$("#nav_news_6 div").addClass('page_selected');
		$("#nav_news_7 div").addClass('page_unselected');
		$("#nav_news_8 div").addClass('page_unselected');
		$("#nav_news_9 div").addClass('page_unselected');
		hide_news();
		$('#news_6').fadeIn('slow');
	});
	
	$("#nav_news_7").click(function() {
		// clear selected class
		$("#nav_news_7 div").removeClass('page_unselected');
		// highlight this nav item
		$("#nav_news_1 div").addClass('page_unselected');
		$("#nav_news_2 div").addClass('page_unselected');
		$("#nav_news_3 div").addClass('page_unselected');
		$("#nav_news_4 div").addClass('page_unselected');
		$("#nav_news_5 div").addClass('page_unselected');
		$("#nav_news_6 div").addClass('page_unselected');
		$("#nav_news_7 div").addClass('page_selected');
		$("#nav_news_8 div").addClass('page_unselected');
		$("#nav_news_9 div").addClass('page_unselected');
		hide_news();
		$('#news_7').fadeIn('slow');
	});
	
	$("#nav_news_8").click(function() {
		// clear selected class
		$("#nav_news_8 div").removeClass('page_unselected');
		// highlight this nav item
		$("#nav_news_1 div").addClass('page_unselected');
		$("#nav_news_2 div").addClass('page_unselected');
		$("#nav_news_3 div").addClass('page_unselected');
		$("#nav_news_4 div").addClass('page_unselected');
		$("#nav_news_5 div").addClass('page_unselected');
		$("#nav_news_6 div").addClass('page_unselected');
		$("#nav_news_7 div").addClass('page_unselected');
		$("#nav_news_8 div").addClass('page_selected');
		$("#nav_news_9 div").addClass('page_unselected');
		hide_news();
		$('#news_8').fadeIn('slow');
	});
	
	$("#nav_news_9").click(function() {
		// clear selected class
		$("#nav_news_9 div").removeClass('page_unselected');
		// highlight this nav item
		$("#nav_news_1 div").addClass('page_unselected');
		$("#nav_news_2 div").addClass('page_unselected');
		$("#nav_news_3 div").addClass('page_unselected');
		$("#nav_news_4 div").addClass('page_unselected');
		$("#nav_news_5 div").addClass('page_unselected');
		$("#nav_news_6 div").addClass('page_unselected');
		$("#nav_news_7 div").addClass('page_unselected');
		$("#nav_news_8 div").addClass('page_unselected');
		$("#nav_news_9 div").addClass('page_selected');
		hide_news();
		$('#news_9').fadeIn('slow');
	});
	
	// show first news on load
	$("#nav_news_9").click();
	
	// thumbnail functions
	$("#nav_thumbnails_1").click(function() {
		// clear selected class
		$("#nav_thumbnails_1 div").removeClass('page_unselected');
		// highlight this nav item
		$("#nav_thumbnails_1 div").addClass('page_selected');
		$("#nav_thumbnails_2 div").addClass('page_unselected');
		hide_thumbnails();
		$('#thumbnails_1').fadeIn('slow');
		$("#thumbnail_1").click();
	});
	
	$("#nav_thumbnails_2").click(function() {
		// clear selected class
		$("#nav_thumbnails_2 div").removeClass('page_unselected');
		// highlight this nav item
		$("#nav_thumbnails_1 div").addClass('page_unselected');
		$("#nav_thumbnails_2 div").addClass('page_selected');
		hide_thumbnails();
		$('#thumbnails_2').fadeIn('slow');
		$("#thumbnail_7").click();
	});
	
	// show first news on load
	$("#nav_thumbnails_1").click();
	
	$("#thumbnail_1").click(function() {
		hide_works();
		$('#work_1').fadeIn('slow');
	});
	
	$("#thumbnail_2").click(function() {
		hide_works();
		$('#work_2').fadeIn('slow');
	});
	
	$("#thumbnail_3").click(function() {
		hide_works();
		$('#work_3').fadeIn('slow');
	});
	
	$("#thumbnail_4").click(function() {
		hide_works();
		$('#work_4').fadeIn('slow');
	});
	
	$("#thumbnail_5").click(function() {
		hide_works();
		$('#work_5').fadeIn('slow');
	});
	
	$("#thumbnail_6").click(function() {
		hide_works();
		$('#work_6').fadeIn('slow');
	});
	
	$("#thumbnail_7").click(function() {
		hide_works();
		$('#work_7').fadeIn('slow');
	});
	
	$("#thumbnail_8").click(function() {
		hide_works();
		$('#work_8').fadeIn('slow');
	});

	// show first work on load
	$("#thumbnail_1").click();
	
	// animate clouds
	setInterval("scrollBg()", scrollSpeed);
	
	// refresh browser on resize of page
	function refresh_page() {
		location.reload();
		// select first menu on load
		$("#1").click();
	};

	var resizeTimer;
	$(window).resize(function() {
    	clearTimeout(resizeTimer);
    	resizeTimer = setTimeout(refresh_page, 100);
	});
	
	// select first menu on load
	$("#1").click();
	
	// animate footer
	$(function() {
		$("#human").click(
			function() {
				$("#human").animate({
					top: 50
				}, 500 );
				$("#butterfly_1").delay(400).animate({
					left: 100,
					top: 40
				}, 200 );
				$("#butterfly_2").delay(400).animate({
					left: 120,
					top: 30
				}, 200 );
				$("#butterfly_3").delay(400).animate({
					left: 100,
					top: 50
				}, 200 );
				$("#butterfly_4").delay(400).animate({
					left: 130,
					top: 45
				}, 200 );
				$("#human").animate({
					top: 80
				}, 500 );
				$("#butterfly_1").animate({
					left: 120,
					top: 55
				}, 900 );
				$("#butterfly_2").animate({
					left: 150,
					top: 55
				}, 900 );
				$("#butterfly_3").animate({
					left: 110,
					top: 70
				}, 900 );
				$("#butterfly_4").animate({
					left: 160,
					top: 70
				}, 900 );
			}
		);
	});
	
	$(function() {
		$("#butterfly_1").click(
			function() {
				$("#butterfly_1").animate({
					left: 110,
					top: 40
				}, 200 );
				$("#butterfly_1").animate({
					left: 120,
					top: 55
				}, 800 );
			}
		);
	});
	
	$(function() {
		$("#butterfly_2").click(
			function() {
				$("#butterfly_2").animate({
					left: 160,
					top: 30
				}, 200 );
				$("#butterfly_2").animate({
					left: 150,
					top: 55
				}, 800 );
			}
		);
	});
	
	$(function() {
		$("#butterfly_3").click(
			function() {
				$("#butterfly_3").animate({
					left: 120,
					top: 60
				}, 200 );
				$("#butterfly_3").animate({
					left: 110,
					top: 70
				}, 800 );
			}
		);
	});
	
	$(function() {
		$("#butterfly_4").click(
			function() {
				$("#butterfly_4").animate({
					left: 170,
					top: 50
				}, 200 );
				$("#butterfly_4").animate({
					left: 160,
					top: 70
				}, 800 );
			}
		);
	});
	
	$(function() {
		$("#car").click(
			function() {
				$("#car").animate({
					left: 300
				}, 2000 );
				$("#human").delay(1800).animate({
					left: 270
				}, 200 );
				$("#car").animate({
					top: 30,
					left: 800
				}, 800 );
				$("#car").animate({
					top: 40,
					left: 800
				}, 200 );
				$("#human").animate({
					left: 200
				}, 500 );
			}
		);
	});

});