// canvas loader and variables
var canvas_loader = null;
var canvas_imgs = null;
var canvas_imgs_complete = 0;
var canvas_imgs_total = 0;

// scroll Fx
var scroll = null;

// what page looking at
var cur_page = "home";

// what portfolio page looking at
var cur_portfolio_page = '';


// start functions
function validate(what,str) {
	if(what == "email") {
		// sample@sample.com
		var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		return filter.test(str);
	} else if(what == "phone") {
		// (123) 456-7890
		var filter = /^\([1-9]\d{2}\)\s?\d{3}\-\d{4}$/;
		return filter.test(str);
	}
}

function disable_submit(form,str) {
	
	if(!form.submit_button) { return; }
	
	if(!form.submit_button.disabled) {
		form.submit_button.message = form.submit_button.value;
		form.submit_button.value = str;
		form.submit_button.disabled = true;
	} else {
		form.submit_button.disabled = false;
		form.submit_button.value = form.submit_button.message;
	}
	
}

//about page show hide divs
function about_show_hide(div_name){
	
	document.getElementById("about_who").style.display = "none";
	document.getElementById("about_what").style.display = "none";
	document.getElementById("about_when").style.display= "none";
	document.getElementById("about_where").style.display = "none";
	document.getElementById("about_why").style.display = "none";
	document.getElementById("about_favorites").style.display = "none";
	
	document.getElementById(div_name).style.display = "block";
}

//services page show hide divs
function services_show_hide(div_name){

	document.getElementById("services_web_development").style.display = "none";
	document.getElementById("services_graphic_design").style.display = "none";
	
	document.getElementById(div_name).style.display = "block";

}

//contact page
function beforeContact() {

	var form = $(document.forms["contact"]);
	disable_submit(form,"Sending...");
	
	new Request({
		url:"include/contact_send.php",
		onSuccess:function(html,xml) {

			// get rid of contact form
			form.dispose();
			
			// create the element
			var div = new Element("div", {
				"html":"<br /><br /><br /><p>Thank you. We will contact you within the next 48 hours.</p>"
			});
			
			// add it
			$("contact").adopt(div);
			
		}
	}).send("c=" + $time() + "&name=" + form.their_name.value.trim() + "&company=" + form.company.value.trim() + "&phone=" + form.phone.value.trim() + "&email=" + form.email.value.trim() + "&comments=" + form.comments.value.trim());

}

// portfolio
function initPortfolio() {
	
	// fix the width
	var imgs = $$("div.thumbnail_inner img").length;
	$$("div.thumbnail_inner")[0].setStyle("width",(imgs * (55 + 36)) + 16);
	
	// do function
	cur_portfolio_page = '';
	setTimeout("portfolioLoad('Liquid')", 500);
	
	// variables for click effect
	var move = 360;
	var marginLeft = 0;
	var page_max = Math.ceil($$("div.thumbnail_inner")[0].getStyle("width").toInt() / move);
	var page_cur = 1;
	
	// reset the width
	$$("div.thumbnail_inner")[0].setStyle("width", (page_max * move) + 16);

	// set up the buttons
	$$("div.arrow_left")[0].addEvent("click",function() {
		if(page_cur > 1) {
			$$("div.thumbnail_inner")[0].tween("margin-left", marginLeft, (marginLeft + move));
			marginLeft += move;
			page_cur--;
		}
	});
	
	$$("div.arrow_right")[0].addEvent("click",function() {
		if(page_cur < page_max) {
			$$("div.thumbnail_inner")[0].tween("margin-left", marginLeft, (marginLeft - move));
			marginLeft -= move;
			page_cur++;
		}
	});
	
}

function portfolioLoad(who) {
	
	if(who == cur_portfolio_page) { return; }
	
	var msgH3 = (cur_portfolio_page != '' ? "Loading..." : "&nbsp;");
	cur_portfolio_page = who;
	
	// get the div
	var div = $$("div#content div.preview")[0];
	var h3 = div.getElement("h3");
	var mi = div.getElement("p.more_info"); // more info
	var sd = div.getElement("p.short_desc"); // short description
	var img = div.getElement("img");
	var mi_div = div.getElement("div.more_info");
	
	// remove the onclick function
	mi.onclick = function() {}
	
	// hide more info
	mi_div.setStyle("opacity",0);
	if(!Browser.Engine.trident) {
		mi_div.setStyle("margin-left",37);
	}
	
	// do the request
	new Request({
		url:"include/portfolio_show.php",
		onRequest:function() {
			h3.set("html",msgH3);
			sd.set("html","&nbsp;");
			img.tween("opacity", 1, 0);
		},
		onSuccess:function(html,xml) {
			
			// wait for image to finish tween, 500 mili
			setTimeout(function() {

				// json makes it come back as an object
				var obj = JSON.decode(html);
				
				// set html
				h3.set("html",obj.h3);
				sd.set("html",obj.short_desc);
				mi_div.set("html",obj.long_desc + '<div class="close_div" onclick="$$(\'div#content div.preview\')[0].getElement(\'div.more_info\').setStyle(\'opacity\',0);">Close</div>');
				
				img.set("src", obj.image);
				img.addEvent("load", function() {
					
					// show image
					img.tween("opacity", 0, 1);
					
					// add the event
					mi.onclick = function() {
						if(mi_div.getStyle("opacity") == 0) {
							mi_div.setStyle("opacity", 1);
						} else {
							mi_div.setStyle("opacity", 0);
						}
					};
					
				});
				
			}, 500);

		}
	}).send("c=" + $time() + "&who=" + who);
	
}

function initScrollLinks() {
	
	$("a_home").addEvent("click", function(event) {
		event = new Event(event).stop();
		scrollToPage("home", 1070, 1910);
	});
	
	$("a_services").addEvent("click", function(event) {
		event = new Event(event).stop();
		scrollToPage("services", 1070, 608);
	});
	
	$("a_portfolio").addEvent("click", function(event) {
		event = new Event(event).stop();
		scrollToPage("portfolio", 0, 2167);
	});
	
	$("a_about").addEvent("click", function(event) {
		event = new Event(event).stop();
		scrollToPage("about", 0, 1215);
	});
	
	$("a_contact").addEvent("click", function(event) {
		event = new Event(event).stop();
		scrollToPage("contact", 0, 0);
	});
	
}

function scrollToPage(next_page,x,y) {
	
	// its the same page, dont' go anywhere
	if(next_page == cur_page) { return; }
	
	// new tween
	var div = $("div_actual_content");
	new Fx.Tween(div, {
		onComplete:function(el) {
			el.setStyle("display","none");
			cur_page = next_page;
			scroll.start(x, y);
		}
	}).start("opacity", div.getStyle("opacity"), 0);
	
}

function getPage() {
	
	new Request({
		url:"include/" + cur_page + ".php",
		onRequest:function() {
			var div = $("div_actual_content");
			div.set("html","Loading...");
			div.setStyle("display","block");
		},
		onSuccess:function(html,xml) {
			
			// for google
			if(pageTracker != null) {
				pageTracker._trackPageview("/" + cur_page + ".php");
			}
			
			// put in place and do a nice tween
			var div = $("div_actual_content");
			div.set("html",html);
			div.tween("opacity", 0, 1);
			
			// init if needed
			if(cur_page == "portfolio") {
				initPortfolio();
			}
			
		}
	}).send("c=" + $time());
	
}

// domready
window.addEvent("domready",function() {
	
	// set the actual content div
	if(Browser.Engine.trident) {
		$("div_actual_content").setStyle("width","900");
	} else {
		$("div_actual_content").setStyles({"width":"100%","text-align":"center"});
	}
	
	// create the scroll Fx
	scroll = new Fx.Scroll("window_frame", {
		wait:false,
		duration:3000,
		wheelStops:false,
		onComplete:getPage
	});
	
	//scroll.set(1075,1910);
	scroll.set(1070,1910);
	
	// set variables
	canvas_loader = $("canvas_loader");
	canvas_imgs = $$("div#canvas img");
	canvas_imgs_total = canvas_imgs.length;
	
	// have a setInterval to keep looping/checking status of canvas images
	var setInt = setInterval(function() {
		
		// set back to zero
		canvas_imgs_complete = 0;
		
		// loop through each image
		canvas_imgs.each(function(el) {
			if(el.complete) {
				
				// increment count
				canvas_imgs_complete++;
				
				// show percentage
				var perc = Math.floor((canvas_imgs_complete / canvas_imgs_total) * 100);
				canvas_loader.getElement("p").set("html","<em>Loading...(" + perc + "%)</em>");
				
				// finished
				if(canvas_imgs_complete == canvas_imgs_total) {
					
					// stop interval
					clearInterval(setInt);
					
					// nice fade out effect for loader
					new Fx.Tween(canvas_loader, {
						duration:500,
						onComplete:function(el) {
							el.setStyle("display", "none");
							initScrollLinks();
							getPage();
						}
					}).start("opacity", 1, 0);
				}
			}
		});
		
	}, 30);
	
});