// JavaScript Document


// project box

var proj = 0;
var slide = 0;

var thumbPath = 'images/portfolio/thumbs/';  // relative path to project view thumbnail imgs
var fullsizePath = 'images/portfolio/fullsize/';  // relative path to project view thumbnail imgs

var projects = new Array();

var dim = '260px'; // width & height of project view
var zero = '0px';
var curSlide;
var nextSlide;
var shadow1;
var shadow2;

function flipright() {
	curSlide = document.getElementById('p' + proj + '_' + slide);
	shadow2 = document.createElement("div");
	$(shadow2)
		.css({width: "0px", height: dim, top: "25px", left: "25px", opacity: ".7"})
		.attr("id","shadow2")
		.appendTo("#project");
	$("#shadow1").css({width: dim, height: dim, top: "25px", left: "25px", opacity: "0"});

	$(curSlide).animate({width: "155px", height: dim, top: "25px", left: "155px"},200,"",function(){$(this).animate({width: zero, height: dim, top: "25px", left: "290px"},200)});
	$("#shadow1").animate({width: "155px", height: dim, top: "25px", left: "155px", opacity: ".3"},200,"",function(){$(this).animate({width: zero, height: dim, top: "25px", left: "290px", opacity: ".7"},200)});
	
	curSlide.parentNode.className = '';
	slide = 0;
	proj = (proj + 1 <= projects.length - 1) ? proj + 1 : 0;
	curSlide = document.getElementById('p' + proj + '_' + slide);
	$(curSlide).css({width: zero, height: dim, top: "25px", left: "25px"});
		
	$(curSlide).animate({width: "155px", height: dim, top: "25px", left: "0px"},200,"",function(){$(this).animate({width: dim, height: dim, top: "25px", left: "25px"},200)});
	$(shadow2).animate({width: "155px", height: dim, top: "25px", left: "0px", opacity: ".3"},200,"",function(){$(this).animate({width: dim, height: dim, top: "25px", left: "25px", opacity: "0"},200,"",function(){$(this).remove()})});
	
	curSlide.parentNode.className = 'zoom';
	switchDetails(proj);
	switchView(slide);
	switchZoom(proj,slide);
}

function flipleft() {
	curSlide = document.getElementById('p' + proj + '_' + slide);
	shadow2 = document.createElement("div");
	$(shadow2)
		.css({width: zero, height: dim, top: "25px", left: dim, opacity: ".4"})
		.attr("id","shadow2")
		.appendTo("#project");
	
	$("#shadow1").css({top: "25px", left: "25px", width: dim, height: dim, opacity: "0"});
	
	$(curSlide).animate({width: "155px", height: dim, top: "25px", left: zero},200,"",function(){$(this).animate({width: zero, height: dim, top: "25px", left: "25px"},200)});
	$("#shadow1").animate({width: "155px", height: dim, top: "25px", left: zero, opacity: ".5"},200,"",function(){$(this).animate({width: zero, height: dim, top: "25px", left: "25px", opacity: ".7"},200)});
	
	curSlide.parentNode.className = '';
	slide = 0;
	proj = ((proj - 1) >= 0) ? proj - 1 : projects.length-1;
	curSlide = document.getElementById('p' + proj + '_' + slide);
	$(curSlide).css({width: zero, height: dim, top: "25px", left: dim});
	
	$(curSlide).animate({width: "155px", height: dim, top: "25px", left: "155px"},200,"",function(){$(this).animate({width: dim, height: dim, top: "25px", left: "25px"},200)});
	$(shadow2).animate({width: "155px", height: dim, top: "25px", left: "155px", opacity: ".3"},200,"",function(){$(this).animate({width: dim, height: dim, top: "25px", left: "25px", opacity: "0"},200,"",function(){$(this).remove()})});
	
	curSlide.parentNode.className = 'zoom';
	switchDetails(proj);
	switchView(slide);
	switchZoom(proj,slide);
}

function flipup(s) {
	curSlide = document.getElementById('p' + proj + '_' + slide);
	shadow2 = document.createElement("div");
	$(shadow2)
		.css({width: dim, height: zero, top: "290px", left: "25px", opacity: ".7"})
		.attr("id","shadow2")
		.appendTo("#project");
	$("#shadow1").css({width: dim, height: dim, top: "25px", left: "25px", opacity: "0"});
	
	nextSlide = !(s==null || isNaN(s)) ? s : projects[proj]['views'][slide - 1] ? slide - 1 : projects[proj]['views'].length-1;
	var nextSlideImg = document.getElementById('p' + proj + '_' + nextSlide);
	if (!nextSlideImg) {
		$("#loading").css("visibility","visible");
		var newLink = document.createElement("a");
		$(newLink).attr("href", fullsizePath + projects[proj]['views'][nextSlide][1]);
		nextSlideImg = new Image();
		$(newLink).append(nextSlideImg);
		$("#project").append(newLink);
		$(nextSlideImg)
			.css({width: dim, height: zero, left: "25px", top: dim})
			.load(function() {
				$("#loading").css("visibility","hidden");
				$(curSlide).animate({width: dim, height: "155px", top: zero, left: "25px"},200,"",function(){$(this).animate({width: dim, height: zero, top: "25px", left: "25px"},200)});
				$("#shadow1").animate({width: dim, height: "155px", top: zero, left: "25px", opacity: "0"},200,"",function(){$(this).animate({width: dim, height: zero, top: "25px", left: "25px", opacity: "0"},200)});
				$(nextSlideImg).animate({width: dim, height: "155px", top: "155px", left: "25px"},200,"",function(){$(this).animate({width: dim, height: dim, top: "25px", left: "25px"},200)});
				$(shadow2).animate({width: dim, height: "155px", top: "155px", left: "25px", opacity: ".5"},200,"",function(){$(this).animate({width: dim, height: dim, top: "25px", left: "25px", opacity: "0"},200,"",function(){$(this).remove()})});
			})
			.attr({id: "p" + proj + "_" + nextSlide, alt: "Project " + proj + ", View " + nextSlide, src: thumbPath + projects[proj]['views'][nextSlide][0]});
		$("#project > a").fancybox({ 
			'padding': 0,
			'hideOnContentClick': true,
			'zoomSpeedIn': 300, 
			'zoomSpeedOut': 300, 
			'overlayShow': false
		});
	}
	else {
		$(nextSlideImg).css({width: dim, height: zero, top: dim, left: "25px"});
		$(curSlide).animate({width: dim, height: "155px", top: zero, left: "25px"},200,"",function(){$(this).animate({width: dim, height: zero, top: "25px", left: "25px"},200)});
		$("#shadow1").animate({width: dim, height: "155px", top: zero, left: "25px", opacity: "0"},200,"",function(){$(this).animate({width: dim, height: zero, top: "25px", left: "25px", opacity: "0"},200)});
		$(nextSlideImg).animate({width: dim, height: "155px", top: "155px", left: "25px"},200,"",function(){$(this).animate({width: dim, height: dim, top: "25px", left: "25px"},200)});
		$(shadow2).animate({width: dim, height: "155px", top: "155px", left: "25px", opacity: ".5"},200,"",function(){$(this).animate({width: dim, height: dim, top: "25px", left: "25px", opacity: "0"},200,"",function(){$(this).remove()})});
	}
	curSlide.parentNode.className = '';
	nextSlideImg.parentNode.className = 'zoom';
	slide = nextSlide;
	switchView(slide);
	switchZoom(proj,slide);	
}

function flipdown(s) {
	curSlide = document.getElementById('p' + proj + '_' + slide);
	shadow2 = document.createElement("div");
	$(shadow2)
		.css({width: dim, height: zero, top: "25px", left: "25px", opacity: "0"})
		.attr("id","shadow2")
		.appendTo("#project");
	$("#shadow1").css({width: dim, height: dim, top: "25px", left: "25px", opacity: "0"});
	
	nextSlide = !(s==null || isNaN(s)) ? s : projects[proj]['views'][slide + 1] ? slide + 1 : 0; // check if a slide is passed as a param, if not, increment
	var nextSlideImg = document.getElementById('p' + proj + '_' + nextSlide);
	if (!nextSlideImg) {
		$("#loading").css("visibility","visible");
		var newLink = document.createElement("a");
		$(newLink).attr("href", fullsizePath + projects[proj]['views'][nextSlide][1]);
		nextSlideImg = new Image();
		$(newLink).append(nextSlideImg);
		$("#project").append(newLink);
		$(nextSlideImg)
			.css({width: dim, height: zero, left: "25px", top: "25px"})
			.load(function() {
				$("#loading").css("visibility","hidden");
				$(curSlide).animate({width: dim, height: "155px", top: "155px", left: "25px"},200,"",function(){$(this).animate({width: dim, height: zero, top: dim, left: "25px"},200)});
				$("#shadow1").animate({width: dim, height: "155px", top: "155px", left: "25px", opacity: ".5"},200,"",function(){$(this).animate({width: dim, height: zero, top: dim, left: "25px", opacity: ".8"},200)});
				$(nextSlideImg).animate({width: dim, height: "155px", top: zero, left: "25px"},200,"",function(){$(this).animate({width: dim, height: dim, top: "25px", left: "25px"},200)});
				$(shadow2).animate({width: dim, height: "155px", top: zero, left: "25px"},200,"",function(){$(this).animate({width: dim, height: dim, top: "25px", left: "25px"},200,"",function(){$(this).remove()})});
			})
			.attr({id: "p" + proj + "_" + nextSlide, alt: "Project " + proj + ", View " + nextSlide, src: thumbPath + projects[proj]['views'][nextSlide][0]});

		$("#project > a").fancybox({ 
			'padding': 0,
			'hideOnContentClick': false,
			'hideOnOverlayClick' : true,
			'speedIn': 300,
			'speedOut': 300,
			'overlayShow': true,
			'overlayColor' : '#000',
			'overlayOpacity' : .4,
			'scrolling' : 'no',
			'autoDimensions' : true
		});
	}
	else {
		$(nextSlideImg).css({width: dim, height: zero, top: "25px", left: "25px"});
		$(curSlide).animate({width: dim, height: "155px", top: "155px", left: "25px"},200,"",function(){$(this).animate({width: dim, height: zero, top: dim, left: "25px"},200)});	
		$("#shadow1").animate({width: dim, height: "155px", top: "155px", left: "25px", opacity: ".5"},200,"",function(){$(this).animate({width: dim, height: zero, top: dim, left: "25px", opacity: ".8"},200)});
		$(nextSlideImg).animate({width: dim, height: "155px", top: zero, left: "25px"},200,"",function(){$(this).animate({width: dim, height: dim, top: "25px", left: "25px"},200)});
		$(shadow2).animate({width: dim, height: "155px", top: zero, left: "25px"},200,"",function(){$(this).animate({width: dim, height: dim, top: "25px", left: "25px"},200,"",function(){$(this).remove()})});
	}
	curSlide.parentNode.className = '';
	nextSlideImg.parentNode.className = 'zoom';
	slide = nextSlide;
	switchView(slide);
	switchZoom(proj,slide);
}


function switchDetails(p) { // displays current project's name and skill categories
	loadViews(p);
	document.getElementById('DetailsH2').innerHTML = projects[p]['name'];
	var list = document.getElementById('detailsList');
	var listitems = list.getElementsByTagName("li");
	for (i=0; i < listitems.length; i++) {
		listitems[i].className = projects[p]['skills'][i] ? "y" : "n";
	}
	$('#launch').empty();
	if (projects[p]['url'] != '') {
		$('#launch').removeClass();
		$('#launch').append('<a href="http://' + projects[p]['url'] + '" target="_blank"></a>');
	}
	else {
		$('#launch').addClass('nolink');	
	}
}

function switchView(s) { // lights up current project view, removes onclick from active link, adds it to all inactives
	var list = document.getElementById('projViews');
	var listitems = list.getElementsByTagName("li");
	for (i=0; i < listitems.length; i++) {
		listitems[i].className = i == s ? "lit" : "unlit";
		if (i == s) {
			listitems[i].childNodes[0].setAttribute("onclick", "");	
		}
		else {
			listitems[i].childNodes[0].setAttribute("onclick", "flipdown(" + i + ")");	
		}
	}
}


function loadViews(p) { // add light for each view of a project
	var viewlights = document.getElementById('projViews');
	while (viewlights.hasChildNodes()) {
        viewlights.removeChild(viewlights.firstChild);
	}
	for (i=0; i<projects[p]['views'].length; i++) {
		var light = document.createElement("li");
		var lightlink = document.createElement("a");
		light.className = i == 0 ? 'lit' : 'unlit';
		if (i > 0) {
			lightlink.setAttribute("onclick", "flipdown(" + i + ")");
		}
		light.appendChild(lightlink);
		viewlights.appendChild(light);
	}
}


function switchZoom(p,s) { // set zoom button's href
	document.getElementById('zoomButton').href = fullsizePath + projects[p]['views'][s][1];
	$("#zoomButton").fancybox({ 
		'padding': 0,
		'hideOnContentClick': false,
		'hideOnOverlayClick' : false,
		'speedIn': 300,
		'speedOut': 300,
		'overlayShow': true,
		'overlayColor' : '#000',
		'overlayOpacity' : .4,
		'scrolling' : 'no',
		'autoDimensions' : true
	});
}


// Contact form
var contentdiv;

function set_value(tar) {
	tar.className = tar.tagName == 'INPUT' ? 'textfield data' : 'data';
	if (tar.value.toString() == tar.name.toString()) {
		tar.value = '';
	}
	else if (tar.id == 'Name' && tar.value == 'Please enter your name.') {
		tar.value = '';
	}
	else if (tar.id == 'PhEmail' && tar.value == 'Please provide a contact.') {
		tar.value = '';
	}
	else if (tar.id == 'PhEmail' && tar.value == 'Ph#/Email') {
		tar.value = '';
	}
	else if (tar.id == 'Message' && tar.value == 'Please enter a message.') {
		tar.value = '';
	}
}

function check_value(tar) {
	if (tar.value == '') {
		if (tar.id != 'PhEmail') {
			tar.value = tar.name;
		}
		else {
			tar.value = 'Ph#/Email';
		}
		tar.className = tar.tagName == 'INPUT' ? 'textfield' : '';
	}
}

function submit_form() {
	var name = $('#Name').val();
	var contact = $('#PhEmail').val();
	var message = $('#Message').val();
	
	var errors = false;
	
	if (!name || name == 'Please enter your name.' || name == 'Name') {
		$('#Name').addClass('error').val('Please enter your name.');
		errors = true;
	}
	if (!contact || contact == 'Please provide a contact.' || contact == 'Ph#/Email') {
		$('#PhEmail').addClass('error').val('Please provide a contact.');
		errors = true;
	}
	if (!message || message == 'Please enter a message.' || message == 'Message') {
		$('#Message').addClass('error').val('Please enter a message.');
		errors = true;
	}
	if (errors == false) {
		request = null;
		var date = new Date();
		var url = 'contact.php?Name=' + name + '&Contact=' + contact + '&Message=' + message + '&Time=' + date;
		contentdiv = document.getElementById('contactForm');
		
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest();
		} 
		else if (window.ActiveXObject) {
			request = new ActiveXObject("Microsoft.XMLHTTP");
		}
		if (request != null) {
			request.onreadystatechange = loadContact;
			request.open("GET",url,true);
			request.send(null);
		} 
		else {
			alert("Your browser cannot use this feature.");
		}
	
	}
	else {
		return false;
	}
}


// Portfolio overlay

function loadOverlay() {
	document.getElementById('zoomProj').className='onButton';
	//document.getElementById('zoomButton').setAttribute("href","javascript:closeOverlay()");	
}


// Ajax

function loadProjAjax() {
	if (request.readyState == 4) {
		if (request.status == 200) {
			contentdiv.innerHTML = request.responseText;
		} 
		else {
			contentdiv.innerHTML = "<p>Sorry, I couldn't load the project. Please try again.</p>";
		}
	}
}


function loadContact() {
	
	if (request.readyState == 4) {
		if (request.status == 200) {
			contentdiv.innerHTML = request.responseText;
		} 
		else {
			contentdiv.innerHTML = "<p>Sorry, couldn't connect to the server. Please try again.</p>";
		}
		setTimeout('var formfields = \'<form method="post" name="contact"><div><input class="textfield" type="text" name="Name" id="Name" value="Name" onfocus="set_value(this)" onblur="check_value(this)" /><input class="textfield" type="text" name="PhEmail" id="PhEmail" value="Ph#/Email" onfocus="set_value(this)" onblur="check_value(this)" /><textarea name="Message" id="Message" onfocus="set_value(this)" onblur="check_value(this)">Message</textarea><input type="button" id="Submit" onclick="submit_form()" alt="Send" /></div></form>\'; contentdiv.innerHTML = formfields;', 3000);
	}
}