col_state = false;
curr_text = "";
$("a[rel^='prettyPhoto']").prettyPhoto({"theme": "facebook"});

$("a[rel^='prettyPhoto']").live("click", function(e){
	e.preventDefault();
	images = [this.href];
	titles = [this.title];
	img_href = this.href;
	img_length = $("a[rel^='prettyPhoto']").length;
	stop = false;
	for(i=0;i<img_length;i++){
		j=i+1;
		if ($("a[rel^='prettyPhoto']")[i].href == img_href) { stop = true; continue; }
		if (stop) j = j - 1;
		images[j] = $("a[rel^='prettyPhoto']")[i].href;
		titles[j] = $("a[rel^='prettyPhoto']")[i].title;
	}
	$.prettyPhoto.open(images, titles, titles);
});


$(document).ready(function(){
	content_width = $("#content").width();
	$("#content").css({"opacity":0, "display":"block"});
	
	// right menu click
	$(".rightcol a").click(function(e){
		e.preventDefault();
		if(!col_state) expandCols();
		else collapseCols();
		curr_text = $(this).text();
	});
	// left menu click
	$(".leftcol a:not(.back-to-start)").click(function(e){
		e.preventDefault();
		if(col_state) collapseCols();
		else expandCols();
		curr_text = $(this).text();
	});
	// collapse all
	$(".back-to-start").live("click", function(e){
		e.preventDefault();
		if(col_state) collapseCols();
		col_state = false;
		$("#ajaxDiv").html("")
	});
	
	$(".rightcol li").hover(function(){
		$(".rightcol li").not(this).css({"opacity":"0.5"});
		$(this).css("opacity", 1);
	}, function(){
		$(".rightcol li").css({"opacity":"1"});
	});
	
	// browser resize
	$(window).resize(function(){
		if(col_state) sizeChange();
	});
	
});

// expand collumns and show content area
function expandCols(){
	doc_width = $(document).width();
	col_state = true;
	$(".leftcol").animate({"opacity": "0.5", "width": (doc_width/2 - content_width/2)}, 500, function(){
		changeContent();
		$("#content").animate({"opacity": 1}, 500);
	});
	$(".rightcol").animate({"opacity": "0.5", "width": (doc_width/2 - content_width/2)}, 500);
}
// collapse collumns and hide content area
function collapseCols(){
	$("#content").animate({"opacity": 0}, 500, function(){
		$(".leftcol").animate({"opacity": 1, "width":"49.99%"}, 500, function(){
			$(".rightcol").css("width", "50%");
			if(col_state) setTimeout(expandCols, 500);
		});
		$(".rightcol").animate({"opacity": 1, "width":"49.99%"}, 500);
	});
}
// change content text (here can be used ajax functions)
function changeContent(){
	$("#content h1").text(curr_text);
}
// change columns size depends of browser size
function sizeChange(){
	doc_width = $(document).width();
	$(".rightcol").width(doc_width/2 - content_width/2);
	$(".leftcol").width(doc_width/2 - content_width/2);
}