//***********************************On Load*******************************

window.onload=function() {
	
	preloadImage("pics/blog/jquery.png");

	mainContent=document.getElementById("mainContent");
	portfolio=document.getElementById("portfolio");
	apps=document.getElementById("apps");
	contact=document.getElementById("contact");
	about=document.getElementById("about");
	blog=document.getElementById("blog");
	wrapper=document.getElementById("wrapper");
	mainContainer=document.getElementById("mainContainer");
	portfolioA=document.getElementById("portfolioA");
	homeA=document.getElementById("homeA");
	aboutA=document.getElementById("aboutA");
	appsA=document.getElementById("appsA");
	blogA=document.getElementById("blogA");
	contactA=document.getElementById("contactA");
	name=document.getElementById("name");
	email=document.getElementById("email");
	message=document.getElementById("message");
	sector=document.getElementById("sector");
	send=document.getElementById("send");
	loading=document.getElementById("loading");
	sidebarMiddle=document.getElementById("sidebarMiddle");
	blogImg=document.getElementById("blogImg");
	blogTitle=document.getElementById("blogTitle");
	blogText=document.getElementById("blogText");
	sidebarContent=document.getElementById("sidebarContent");
	sidebarAlt=document.getElementById("sidebarAlt");
	sidebar=document.getElementById("sidebar");


	loading.style.display="none";
	
	wrapper.style.display="block";
	
	mainContainer.style.height=mainContent.offsetHeight +"px";
	
	initBlog();	

	
	
	portfolioA.onclick=function() {menuClick("portfolio"); return false};
	homeA.onclick=function() {menuClick("mainContent"); return false};
	aboutA.onclick=function() {menuClick("about"); return false};
	appsA.onclick=function() {menuClick("apps"); return false};
	blogA.onclick=function() {blogClick(); return false};
	contactA.onclick=function() {menuClick("contact"); return false};
	send.onclick=function() { sendNew(); };

}

//***********************************After load*************************

var blogArray;
var funArray=[];

function initBlog() {
	ajax("blog.php","",blogExec,"reading db");
}

function handleElement(i) {
    document.getElementById("b"+i).onclick=function() {
		runCmd("loading blog article...");
		runCmd("done");
		blog.innerHTML="<img class='contentImg' src='pics/blog/"+blogArray[i].pic+"' />";
		blog.innerHTML+="<h1>"+blogArray[i].title+"</h1>";
		blog.innerHTML+="<p>"+blogArray[i].text+"</p>";
		equal("blog");
		return false;
    };
}

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

function blogExec(response) {
	blogArray=JSON.parse(response);
	runCmd("done");
	blogTitle.innerHTML=blogArray[0].title;
	blogImg.src="pics/blog/"+blogArray[0].pic;
	blogText.innerHTML=blogArray[0].text.firstSentence();
	sidebarMiddle.style.height=sidebarContent.offsetHeight+"px";
	
	for(i=0; i<5; i++) {
		sidebarAlt.innerHTML+="<a href='#' id='b"+i+"' class='sideTitle'><span style='font-size:12px;'>"+blogArray[i].date+"</span><br/>"+blogArray[i].title+"</a>";
		preloadImage("pics/blog/"+blogArray[i].pic);
	}
	
	for(i=0; i<5; i++) {
		handleElement(i);
	}
	
	blog.innerHTML+="<img class='contentImg' src='pics/blog/"+blogArray[0].pic+"' />";
	blog.innerHTML+="<h1>"+blogArray[0].title+"</h1>";
	blog.innerHTML+="<p>"+blogArray[0].text+"</p>";
	
}


//***********************************Miscellaneous*************************

String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

String.prototype.firstSentence = function() {
	var reg=/^.*?[\.!\?](?:\s|$)/;
	var matchArray;
	matchArray=this.match(reg);
	return matchArray[0];
}

//***********************************Menu click****************************


function hideAll() {
	mainContent.style.display="none";
	about.style.display="none";
	portfolio.style.display="none";
	apps.style.display="none";
	blog.style.display="none";
	contact.style.display="none";
}

function equal(el) {
	var temp=sidebar.offsetHeight-(document.getElementById(el).offsetHeight+70);
	if (temp>0) {
		mainContainer.style.height=document.getElementById(el).offsetHeight+temp+"px";
	} else {
		mainContainer.style.height=document.getElementById(el).offsetHeight + "px";
	}
}

function menuClick(current) {
	hideAll();
	if(current!="mainContent") {
		runCmd("loading "+current+"...");
		runCmd("done");
		sector.innerHTML="Sector: " + current.capitalize();
	} else {
		runCmd("loading home...");
		runCmd("done");
		sector.innerHTML="Sector: Home";
	}
	document.getElementById(current).style.display="block";

	sidebarContent.style.display="block";
	sidebarAlt.style.display="none";	
	sidebarMiddle.style.height=sidebarContent.offsetHeight+"px";

	equal(current);
}

function blogClick() {
	hideAll();
	sector.innerHTML="Sector: Blog";
	runCmd("loading blog...");
	runCmd("done");

	blog.innerHTML="<img class='contentImg' src='pics/blog/"+blogArray[0].pic+"' />";
	blog.innerHTML+="<h1>"+blogArray[0].title+"</h1>";
	blog.innerHTML+="<p>"+blogArray[0].text+"</p>";

	sidebarContent.style.display="none";
	sidebarAlt.style.display="block";	
	sidebarMiddle.style.height=sidebarAlt.offsetHeight+"px";

	document.getElementById("blog").style.display="block";

	equal("blog");
}



//*************************************Send mail********************************************


function sendNew() {
	var req="name="+name.value+"&email="+email.value+"&message="+message.value;
	var regex = /^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$/;
	if (name.value!="" && regex.test(email.value) && message.value!="") {
		ajax("sendmail.php",req,sendExec,"sending message");
	} else {
		runCmd("error: check fields","red");
	}
}

function sendExec(response) {
	if (response!="failed") {
		name.value="";
		email.value="";
		message.value="";
		runCmd("message sent");
	} else {
		runCmd("failed: server error","red");
	}
}


//**********************************Ajax request******************************************


var busy=false;
var ajaxQ=[];

function ajax(target,request,executor,status) {
	if (busy==true) {
		ajaxQ.push([target,request,executor,status]);
	} else {
		if(status) {
			runCmd(status);
		}
		busy=true;
		var xmlhttp=new XMLHttpRequest();
		xmlhttp.onreadystatechange=function() {
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				busy=false;
				executor(xmlhttp.responseText);
				if (ajaxQ.length!=0) {
					var temp=ajaxQ.shift();
					ajax(temp[0],temp[1],temp[2],temp[3]);
				}
			}
		}
		xmlhttp.open("POST",target,true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send(request);
	}
}


//**********************************Animated text row********************************


var el,text,pos;
var running=false;
var que=[];

function textRow(el_, text_,pos_) {
		el="c4";
		text=text_;
		pos=1;
		animeText();
}

function animeText() {
	running=true;
	element=document.getElementById(el);
	txt=text.slice(0,pos);
	element.innerHTML=txt;
	pos++;
	if(pos<(text.length+1)) {
		setTimeout(animeText,50);
	} else {
		running=false;
		if (que.length!=0) {
			runCmd(que.shift());
		}
	}
}

var command=[" "," "," "," "," "];

function runCmd(cmd,color) {
	if(running==false) {
		if(color) {
			document.getElementById("c4").style.color="red";
		} else {
			document.getElementById("c4").style.color="#0a6722";			
		}
		command.shift();
		command.push(cmd);
		document.getElementById("c0").innerHTML=command[0]
		document.getElementById("c1").innerHTML=command[1]
		document.getElementById("c2").innerHTML=command[2]
		document.getElementById("c3").innerHTML=command[3]
		textRow("c4",command[4],1);
	} else {
		que.push(cmd);
	}
}