//eventlistener for page load
if (window.addEventListener){
window.addEventListener("load", pageLoaded, false);
}else if(window.attachEvent){
window.attachEvent("onload", pageLoaded);
}else{
window.onload=pageLoaded;
}

function pageLoaded(){// when the page is loaded
	//varcontent = document.getElementById('screen');
	varcontent = document.getElementById('content'); //get the content section
	if(window.XMLHttpRequest){
	buildAbout();//build the gallery page
	}else{
	buildGallery();
	}
};



//button mouse over effects
function over(obj){
	if(obj.className == "upper"){
	obj.style.backgroundImage ="url('images/uppero.gif')";
	}else if(obj.className == "downer"){
	obj.style.backgroundImage ="url('images/downero.gif')";	
	}
	document.body.style.cursor = "pointer";
};

function out(obj){
	if(obj.className == "upper"){
	obj.style.backgroundImage ="url('images/upper.gif')";
	}else if(obj.className == "downer"){
	obj.style.backgroundImage ="url('images/downer.gif')";	
	}
	document.body.style.cursor = "default";
};


function stickyGallery(){
	if(window.XMLHttpRequest){
	 loadPage('gallery');
	}else{
	location.reload(true);
	}
}

function loadPage(page){// button on click event
	clearTempElements();
	switch(page)
	{
	case "gallery":
		buildGallery();
		break;
	case "about":
		buildAbout();
		break;
	}
	
}

///function builds the gallery page
function buildGallery(){
	function stampHeaders(){//make the header images
	//content = document.getElementById('content');
		var urls = new Array("images/web.gif", "images/print.gif", "images/mm.gif");
		for(var i=0; i<3; i++){
			newitem = document.createElement('img');
			newitem.src=urls[i];
			newitem.className="title";
			varcontent.appendChild(newitem);
		}
		
	};//closes stamp headers

	function stampIframes(){//this function stamps the iframes and buttons
		var frameIds = new Array("web", "prints", "mm");//set the ids for the frames
		var frameSrcs = new Array("web.php", "print.php", "mm.php");//set the urls for their pages
		for (var i=0; i<3; i++){//loop through all of them
			newitem = document.createElement("iframe");
			newitem.id=frameIds[i];
			//newitem.name=frameIds[i];
			newitem.className="frame";
			newitem.scrolling="no";
			newitem.src=frameSrcs[i];
			varcontent.appendChild(newitem);///attach the iframes
			//alert("current amount of iframes(building) = "+window.frames.length);
			newpipe = document.createElement("div");//start making the divs to the right that hold the buttons
			newpipe.className="pipe";
			for(var j=0; j<2; j++){//insided the pipes are 2 divs for buttons newswitch
				//newswitch is the container div for the buttons
				newswitch = document.createElement("div");
				newswitch.onmouseover=function(){ over(this); };
				newswitch.onmouseout=function(){ out(this);};
				newswitch.onclick=function(){ scroller(this);};
				if(j==0){//depending of if its the second or first button name it upper or downer.
					newswitch.className="upper";
					newswitch.id=frameIds[i]+"up";
				}else{
					newswitch.className="downer";
					newswitch.id=frameIds[i]+"down";
				}
				newpipe.appendChild(newswitch);//put the divs in the pipes
			}
			varcontent.appendChild(newpipe);//add the pipes to the content area.
		}
	};

//call all the nested functions to bulid the parts	
stampHeaders();
stampIframes();
scrollLoad();//initializes scroll.js
//alert(window.frames[0]);
}//closes build gallery



///this function builds the about page
function buildAbout(){
	var divids = new Array("pic", "type");//set the ids for the 2 divs
	for(var i=0; i<2; i++){
	var newdiv = document.createElement("div");//create both divs
	newdiv.id = divids[i];// Id them accordingly
	varcontent.appendChild(newdiv);//attache to the content
	if(newdiv.id == "type"){// if its the second div break out the content
		for(var j=0; j<2; j++){
		newp = document.createElement("p");//make a paragraph
		newdiv.appendChild(newp);
		if(j == 0 ){
		newp.innerHTML="Hello, I am Kev Zettler. I am a Versatile; front-end, Ui, Ux Developer. I am currently looking for work in the San Francisco Bay area. I am most comforatble on a MVC LAMP development platform or Ruby on Rails <br /><br />The <a href=\"javascript://\" onclick=\"loadPage('gallery');\">gallery</a> has examples of my work. Feel free to contact me with any questions. My resume below, further details my skills and qualifications.<br /> ";
		}else{
		newp.innerHTML="Contact Info<br />Email: Kevzettler@gmail.com";
		}//cloes if j==1
		}
		var pdfa = document.createElement("a"), wdoc = document.createElement("a");
		pdfa.href="http://docs.google.com/Doc?docid=0AT_pCUWeSp24ZGh0aGNraHFfMzFkNjNzYzRnNg&hl=en";
		pdfa.innerHTML="Resume in .PDF";
		pdfa.className="filelink";
		wdoc.href="http://docs.google.com/Doc?docid=0AT_pCUWeSp24ZGh0aGNraHFfMzFkNjNzYzRnNg&hl=en";
		wdoc.innerHTML="Resume for Word";
		wdoc.className="filelink";
		newp.appendChild(pdfa);
		newp.appendChild(wdoc);
		}//closes if
		
	}//closes for
	};//closes function




function clearTempElements(){//function for clearing temp elements
		while (varcontent.hasChildNodes() )
		{
			//alert("deleting this from content = "+varcontent.firstChild);
			varcontent.removeChild(varcontent.firstChild );
			//alert("current amount of iframes(deleting) = "+window.frames.length);
		}
	
	
};

///////////////////////////////////////////////////////////////////////
/////////////////////////this is for scrolling the frames//////////////
//////////////////////////////////////////////////////////////////