ImageLoader.prototype.constructor = ImageLoader;
function ImageLoader(){};
ImageLoader.prototype.load = function(images, onDone, onEach, onError) {
	var prefix = "assets/";
	var loadedCount = 0;
	for(var i = 0; i < images.length; i++) {
		var image = new Image();
		image.onload = function() {
			if (++loadedCount == images.length) {
				if (onEach != undefined) {
					onEach(this.src, loadedCount);
				}
				if (onDone != undefined) {
					onDone();
				}
				return;
			} else {
				if (onEach != undefined) {
					onEach(this.src, loadedCount);
				}
			}
		};
		image.onerror = function() {
			if (onError != undefined) {
				onError();
			}
		}
		image.src = prefix+images[i];
	}
};

(function(){
	// apply the javascript to the site!
	function init() {
 
		// = handle tooltip text for mail form
		var storeDefaultText = function(selector) {
			var $element = $(selector)
			var text = $element.attr("title");
			$element.attr("title", "");
			$element.data("text", text);
			$element.val(text);
		}
		
		storeDefaultText("input[name='name']");
		storeDefaultText("input[name='email']");
		storeDefaultText("textarea[name='message']");
		
		$("input, textarea").focusin(function(event){
			var $target = $(event.target);
			var text = $target.data("text"); 
			if($target.val() == text){
				$target.val("");
			}
		});
		$("input, textarea").focusout(function(event){
			var $target = $(event.target);
			var text = $target.data("text"); 
			if($.trim($target.val()) == ""){
				$target.val(text);
			}
		});
	 
		// = disable all clicks on a elements
		$("a").click(function(event){
			event.preventDefault();
		});
		// = except for the map 
		$("a.map").unbind("click");
		$("a.powered_by_pastelstudios").unbind("click");
		
		// = add vertical scroll
		var flagVertical = false;
		var flagHorizontal = false;
		$("div#main").scrollable({
			vertical : true,
			size : 1,
			clickable : false,
			globalNav : true,
			keyboard : false,
			easing: "easeOutExpo",
			speed: 800,
			onBeforeSeek : function(event, index) {
				// dont scroll until the previous animation finishes
				if (!flagVertical) {
					flagVertical = true;
				} else {
					return false;
				}
						
				var removeLastActive = function() {
					var $lastSel = $("a.active", $("div.nav_bar"));
					var cssClass = $lastSel.attr("class");
					cssClass = cssClass.replace("_active", "");
					$lastSel.attr("class", cssClass);
				}
				
				var addActiveToCurrent = function(current) {
					var $element = $("a."+current);
					var cssClass = $element.attr("class");
					if (cssClass != undefined) {
					cssClass = cssClass.replace(current, current+"_active");
					$element.attr("class", cssClass);
					}
				}
	 
				var indexToName = ["home", "about", "contact"];
				var currName = indexToName[index];
				removeLastActive();
				addActiveToCurrent(currName);

				$("div#navi").css("display", index == 0 ? "block" : "none");
				return true;
			},
			onSeek: function(event, index) {
				if (index == 0) {
					var timedFunc = function() {
						window.api.play();
						flagVertical = false;
					}
					setTimeout(timedFunc, 1000);
				} else {
					window.api.stop();
				}
				flagVertical = false;
			}}).navigator({
					navi : "div.nav_bar",
					naviItem: 'a'
				});
	 
		var horizontal = $("div#scroller").scrollable( {
			size : 1,
			globalNav : true,
			keyboard: false,
			easing: "easeOutExpo",
			speed: 900,
			loop: true,
			circular: true,
			onBeforeSeek: function(event){
				if (!flagHorizontal) {
					flagHorizontal = true;
				} else {
					return false;
				}
				return true;
			},
			onSeek: function(event){
				flagHorizontal = false;
			}
		}) .circular().navigator("div#navi");
		// = fix for the circular bug that moves the 
		// = scroller to the first clonned item
		$(".items").css("left", "-612px");
		
		window.api = $("div#scroller").autoscroll( {
			autoplay : true,
			autopause : true,
			interval : 5500,
			api : true
		});
	 
		// = send mail form handler and validator
		$("form#sendEmail").validate({
			submitHandler : function(form) {
								var $loader = $("div.loader"); 
								$loader.css("display", "block");
								
								var $name = $("input[name='name']"); 
								var $email = $("input[name='email']"); 
								var $message = $("textarea[name='message']"); 
								
								var name = $name.val();
								var email = $email.val();
								var message = $message.val();

								var arg = {
									name : name,
									email : email,
									message : message
								};
								$.ajax({
									url: "sendEmail.php",
									data: arg,
									success:  function() {
										$loader.css("display", "none");
										$confirm = $("div.mail_confirm"); 
										$confirm.css("display", "block");
										var hideConfirm = function() {
											$name.val($name.data("text"));
											$email.val($email.data("text"));
											$message.val($message.data("text"));
											$confirm.css("display", "none");
										}
										setTimeout(hideConfirm, 2000);
									},
									error: function() {
										$loader.css("display", "none");
									},
									type: "POST"
								});
			},
			errorClass : "error",			
			highlight : function(element, errorClass) {
							$(element).addClass(errorClass);
			},
			unhighlight : function(element, errorClass) {
								$(element).removeClass(errorClass);
			},
			errorPlacement: function(error, element) {
				// do nothing
			},
			rules : {
				name : {
					required : true,
					minlength : 5							
				},
				email : {
					required : true,
					email : true
				},
				message : {
					required : true,
					minlength : 10								
				}
			},
			messages : {
				name : {
					required : "",
					minlength : ""							
				},
				email : {
					required : "",
					email : ""
				},
				message : {
					required : "",
					minlength : ""								
				}
			}});
		
		// = this one prints the current date every time 
		// = you open the contact page
		var addZero = function(number){
			if(number <= 9){
				number = "0" + number;
			}
			return number;
		} 	
		$("a#id_contact").click(function(){
			var now = new Date();
			var currDay = addZero(now.getDate());
			var currMonth = addZero(now.getMonth()+1);
			var currYear = now.getFullYear();
			$("p.date").html(currDay + "." + currMonth + "." + currYear);
		});
	}

	// ===================================================================================
	// ===================================================================================
	// on document ready do image preloading and initialization
	$(function() {
		if ($.browser.msie) {
			$("body").css("display", "block");
			$(".container").css("display", "block");
			init();
		} else {
			// images for initial display
			var imageLoader = new ImageLoader();
			var images = ["img/bgr.jpg", 
			              "img/footer_perli.png",
			              "img/footer_br.png",
			              "img/logo.png",
			              "img/loader.png",
			              "img/loader_line.png"];
			
			imageLoader.load(images, function(){
				$("body").css("display", "block");
				$("div.site_loader").css("display", "block");
				
				var images = ["pictures/img001.jpg",
				              "pictures/img002.jpg",
				              "pictures/img003.jpg",
				              "pictures/img004.jpg",
				              "pictures/img005.jpg",
				              "pictures/img006.jpg",
				              "pictures/img007.jpg",
				              "img/page.png", 
				              "img/navi.png",
				              "img/music.png",
				              "img/signiture.png",
				              "img/store.png",
				              "img/soon.png",
				              "img/perli.png"];
			 
				var len = images.length;
				
				// load the rest of the content and initialize the site
				imageLoader.load(images, 
								 function() {
									 $("div.site_loader").css("display", "none");
									 $(".container").css("display", "block");
									 init();
								 }, 
								 function(src, index) {
									 var frac = Math.ceil((index/len) * 82);
									 $("div.site_loader_line").css("width", frac+"%");
								 });
			});
		}
	});
})();