var images=[];
var widthes=[];
var heights=[];
var titles=[];
var descriptions=[];
var links=[];

$(document).ready(function() {
	
	var images_data_array=$("#images_data").text().split(","); 
	var titles_data_array=$("#titles_data").text().split(",");
	var descriptions_data_array=$("#descriptions_data").text().split(",");
	var widthes_data_array=$("#widthes_data").text().split(",");
	var heights_data_array=$("#heights_data").text().split(",");
	$(".left").html("");
	$(".links").html("");
	
	for(i=0;i<images_data_array.length;i++) {
		//$("#images").append('<p><a href="'+images_data_array[i]+'">'+links_data_array[i]+'</a></p>');
		images[i] = images_data_array[i];
		titles[i] = titles_data_array[i];
		descriptions[i] = descriptions_data_array[i];
		widthes[i] = widthes_data_array[i];
		heights[i] = heights_data_array[i];
		j=i+1;
		$(".left").append('<a href="#" class="portfolioItem">'+j+'</a>');
	}
	
	$(".item").html('<img id="portfolioImage" src="./images/portfolio/'+images[0]+'"><div class="itemDescription"><h2>'+titles[0]+'</h2><p>'+descriptions[0]+'</p></div>');
	$("#portfoliostrip").css('height',heights[0]);
	$("#portfoliostrip").css('width',widthes[0]);
	$("#portfolio").css('width',widthes[0]);
	$("#portfolio").css('height',heights[0]);
	$("a.portfolioBtn1").css('backgroundColor', '#cfcfcf');
	$("a.portfolioBtn").css('backgroundColor', '#cfcfcf');
	$(".buttons").css('width',widthes[0]);
	//for(i=0;i<images.length;i++) {
		//j=i+1;
		//$(".left").append('<a href="#" class="portfolioItem">'+j+'</a>');	
	//}
	//for(i=0;i<links.length;i++) {
		//$("#links").append('<p><a href="'+links[i]+'">'+links[i]+'</a></p>');
	//}
	
	var links_data_array=$("#links_data").text().split(","); 
	var linksString = "";
	for(i=0;i<links_data_array.length;i++) {
		//$("#links").append('<p><a href="http://'+links_data_array[i]+'">'+links_data_array[i]+'</a></p>');	
		linksString = linksString + '<p><a href="http://'+links_data_array[i]+'" target="_blank">'+links_data_array[i]+'</a></p>'
	}
	$("#links").html(linksString);

$("a.portfolioItem").click(function() {
	$(".item").html('<img id="portfolioImage" src="./images/portfolio/'+images[parseInt($(this).html())-1]+'"><div class="itemDescription"><h2>'+titles[parseInt($(this).html())-1]+'</h2><p>'+descriptions[parseInt($(this).html())-1]+'</p></div>');
	//$("a.portfolioBtn1").css('backgroundColor', '#cfcfcf');
	//$("a.portfolioBtn").css('backgroundColor', '#cfcfcf');
	$("#portfoliostrip").animate({width: widthes[parseInt($(this).html())-1]});
	$("#portfoliostrip").animate({height: heights[parseInt($(this).html())-1]});
	$("#portfolio").animate({width: widthes[parseInt($(this).html())-1]});
	$("#portfolio").animate({height: heights[parseInt($(this).html())-1]});
	$(".buttons").animate({width: widthes[parseInt($(this).html())-1]});
	$(".itemDescription").animate({width: widthes[parseInt($(this).html())-1]});
	
});

$("a.portfolioBtn").click(function() {
	$("#contact").hide();
	$("#about").hide();
	$("#links").hide();
	$("#portfolio").fadeIn();
	$(".buttons .left").fadeIn();
	$(".buttons a").css('backgroundColor', '#e6e6e6');
	$("a.portfolioBtn").css('backgroundColor', '#cfcfcf');
	$("a.portfolioBtn1").css('backgroundColor', '#cfcfcf');
	$(this).css('backgroundColor', '#cfcfcf');
	$("#portfoliostrip").animate({left: "0px"});
	$(".buttons").animate({width: $("#portfoliostrip").css('width')});
});
$("a.aboutBtn").click(function() {
	$("#contact").hide();
	$("#portfolio").hide();
	$("#links").hide();
	$("#about").fadeIn();
	$(".buttons .left").fadeOut();
	$(".buttons a").css('backgroundColor', '#e6e6e6');
	$(this).css('backgroundColor', '#cfcfcf');
	$(".buttons").animate({width: "730px"});
});
$("a.linksBtn").click(function() {
	$("#contact").hide();
	$("#portfolio").hide();
	$("#about").hide();
	$("#links").fadeIn();
	$(".buttons .left").fadeOut();
	$(".buttons a").css('backgroundColor', '#e6e6e6');
	$(this).css('backgroundColor', '#cfcfcf');
	$(".buttons").animate({width: "730px"});
});

$("a.contactBtn").click(function() {
	$("#about").hide();
	$("#portfolio").hide();
	$("#links").hide();
	$("#contact").fadeIn();
	$(".buttons .left").fadeOut();
	$(".buttons a").css('backgroundColor', '#e6e6e6');
	$(this).css('backgroundColor', '#cfcfcf');
	$(".buttons").animate({width: "730px"});
});
});