$(document).ready(function() {
	// image rollovers
	$(function() {
	    $('img[data-hover]').hover(function() {
	        $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');
	    }).each(function() {
	        $('<img />').attr('src', $(this).attr('data-hover'));
	    });
	});

	init();
});

function init() {
	$(".panel.left .header,.panel.left .content,.panel.right .content").hide().fadeTo("slow", 0);
	//$("#portfolio1,#portfolio2,#portfolio3").hide().fadeTo("slow", 0);
	$("#portfolio1-gallery").show().fadeTo("slow", 1.0);
	$("#nav-profile,#nav-toolbox,#nav-contact,#nav-clients,#nav-portfolio,#nav-blog").hide().fadeTo("slow", 0);

	$(".panel.left .header").show().delay(0).fadeTo("slow", 1.0);
	$("#nav-profile").show().delay(1000).fadeTo("slow", 1.0);
	$("#nav-toolbox").show().delay(800).fadeTo("slow", 1.0);
	$("#nav-contact").show().delay(600).fadeTo("slow", 1.0);
	$("#nav-clients").show().delay(1200).fadeTo("slow", 1.0);
	$("#nav-portfolio").show().delay(1400).fadeTo("slow", 1.0);
	$("#nav-blog").show().delay(1600).fadeTo("slow", 1.0);
	$(".panel.left .content").show().delay(1800).fadeTo("slow", 1.0);
	$(".panel.right .content").show().delay(2000).fadeTo("slow", 1.0);

    setJson();
}

function setJson() {
	$.getJSON('data/portfolio.json', function(data) {
		//alert(data.portfolio.length);
		//alert(data.portfolio[0].title);
		$("#section-portfolio").append(getPortfolioStr(data));
		hidePortfolio(data.portfolio.length);
		portfolio.maxPos = data.portfolio.length;
		portfolio.show();
		// get data port length, hide items
			//$("#portfolio1,#portfolio2,#portfolio3").hide().fadeTo("slow", 0);
	});
}

function hidePortfolio(length) {
	for (var i=0; i<length; i++) {
		$("#portfolio"+i).hide().fadeTo("slow", 0);
	}
}

function getPortfolioStr(data) {
	var i = 0;
	var strVar="";
	for (p in data.portfolio) {
		strVar += "							<div id=\"portfolio"+i+"\" class=\"portfolio\">";
		strVar += "								<h1>"+data.portfolio[i].title+"<\/h1>";
		strVar += "";
		strVar += "								<p><span class=\"lead-text\">Project:<\/span> "+data.portfolio[i].projectDescription+"<\/p>";
		strVar += "								<p><span class=\"lead-text\">Tools:<\/span> "+data.portfolio[i].tools+"<\/p>";
		strVar += "								<div id=\"portfolio"+i+"-gallery\" class=\"gallery\"><img src=\""+data.portfolio[i].gallery[0].imageMain+"\" border=\"0\"\/><\/div>";
		strVar += "								<div id=\"portfolio"+i+"-thumbnails\" class=\"portfolio-thumbnails\">";
		strVar += "									<ul>";
		//alert(data.portfolio[i].gallery.length);
        var j = 0;
        for (g in data.portfolio[i].gallery) {
            //alert(data.portfolio[i].gallery[j].imageMain);
            strVar += "										<li><a href=\"javascript:void(0)\" onclick=\"javascript:gallery.select("+i+",'"+data.portfolio[i].gallery[j].imageMain+"')\"><img src=\""+data.portfolio[i].gallery[j].imageMain+"\" width=\"108\" border=\"0\"\/><\/a> <\/li>";
            j++;
        }
		strVar += "									<\/ul>";
		strVar += "								<\/div>";
		strVar += "							<\/div>";

		i++;
	}
	return strVar;
}

var navigation = {
	currLeftSection:1,
	currRightSection:1,
	/*init:function() {
		this.currLeftSection = 1;
		this.currRightSection = 1;
	},*/
	gotoSection:function(panel, section) {
		var cssPath = ".panel."+panel+" .allcontent";
		if (panel == "left") {
			var currSection = this.currLeftSection;
			this.currLeftSection = section;
		} else {
			var currSection = this.currRightSection;
			this.currRightSection = section;
		}
		var pos = (currSection - section) * 516;
		$(cssPath).animate({"top": "+="+pos+"px"}, "slow");
	}
}

var portfolio = {
	currPos:0,
	maxPos:5,
	goto:function(pos) {

	},
	show:function() {
		var divId = "#portfolio"+this.currPos;
		$(divId).show().fadeTo("slow", 1.0);
		$(divId).css('z-index', 1000);
	},
	hide:function() {
		var divId = "#portfolio"+this.currPos;
		$(divId).show().fadeTo("slow", 0);
		$(divId).css('z-index', 0);
	},
	next:function() {
		this.hide();
		this.currPos += 1;
		if (this.currPos >= this.maxPos)
			this.currPos = 0;
		this.show();
	},
	prev:function() {
		this.hide();
		this.currPos -= 1;
		if (this.currPos < 0)
			this.currPos = this.maxPos-1;
		this.show();
	}
}

var gallery = {
	select:function(section, filename) {
		var divId = "#portfolio"+section+"-gallery";
		$(divId).hide().fadeTo("slow", 0);
		$(divId).html('<img src="'+filename+'" border="0"/>');
		$(divId).show().fadeTo("fast", 1.0);
	}
}