var pos = 140;
var mov = 0;
var menu_status = 0; // 0: closed | 1: closing | 2: open | 3: opening
var page_dir = 0; //0: hiding | 1: showing

var content_pos = 50;
var content_mov = 0;

var alert_opacity = 1.0;
var page_opacity = 1.0;

var image_opacity = 0;

function menu_open(){
	if(menu_status <=1){
		menu_status = 3; //opening
		menu_open_anim();
	}
}
	
function menu_close(){
	if(menu_status >=2){
		menu_status = 1; //closing
		menu_close_anim();
	}
}

function menu_open_anim(){
	if(menu_status == 3){
		document.getElementById("menu").style.left = (pos + mov) + "px";
		document.getElementById("menu_hit_open").style.left = (pos + mov) + "px";
		if(pos > 2){
			pos = parseInt(document.getElementById("menu").style.left);
			mov = -(pos/5);
			timeout_open = setTimeout('menu_open_anim();', 10);
		} else {
			menu_status = 2; //open
			pos = 0;
			document.getElementById("menu").style.left = pos + "px";
			document.getElementById("menu_hit_open").style.left = pos + "px";
		}
	}
}
	
function menu_close_anim(){
	if(menu_status == 1){
		document.getElementById("menu").style.left = (pos + mov) + "px";
		document.getElementById("menu_hit_open").style.left = (pos + mov) + "px";
		if(pos < 138){
			pos = parseInt(document.getElementById("menu").style.left);
			mov = (140 - pos)/5;
			timeout_close = setTimeout('menu_close_anim();', 10);
		} else {
			menu_status = 0; //closed
			pos = 140;
			document.getElementById("menu").style.left = pos + "px";
			document.getElementById("menu_hit_open").style.left = pos + "px";
		}
	}
}
	
function page_hide(){
	if(page_dir==0){
		document.getElementById("content").style.left=content_pos + "px";
		document.getElementById("content").style.opacity=page_opacity;
		document.getElementById("content").style.MozOpacity=page_opacity;
		document.getElementById("content").style.filter='alpha(opacity=' + page_opacity*100 + ')';
		if(page_opacity > 0){
			content_pos = content_pos + 1;
			page_opacity = page_opacity - 0.1;
			fade_out = setTimeout('page_hide()', 30);
		} else {
			content_pos = 40;
			page_opacity = 0.0;
			document.getElementById("content").style.left=content_pos + "px";
			document.getElementById("content").style.opacity=page_opacity;
			document.getElementById("content").style.MozOpacity=page_opacity;
			document.getElementById("content").style.filter='alpha(opacity=' + page_opacity*100 + ')';
			page_dir="1";
			content_request();
		}
	}
}

function page_show(){
	if(page_dir==1){
		document.getElementById("content").style.left=content_pos + "px";
		document.getElementById("content").style.opacity=page_opacity;
		document.getElementById("content").style.MozOpacity=page_opacity;
		document.getElementById("content").style.filter='alpha(opacity=' + page_opacity*100 + ')';
		if(page_opacity < 1){
			content_pos = content_pos + 1;
			page_opacity = page_opacity + 0.1;
			fade_out = setTimeout('page_show()', 30);
		} else {
			content_pos = 50;
			page_opacity = 1.0;
			document.getElementById("content").style.left=content_pos + "px";
			document.getElementById("content").style.opacity=page_opacity;
			document.getElementById("content").style.MozOpacity=page_opacity;
			document.getElementById("content").style.filter=""; 
			//display scrollbar
			if(document.getElementById("post_body")){
				document.getElementById("post_body").style.marginRight = "0px";
				document.getElementById("post_body").style.overflow = "auto";
			}
		}
	}
}

function alert_fade_out(){
	document.getElementById("alert_box").style.opacity=alert_opacity;
	document.getElementById("alert_box").style.MozOpacity=alert_opacity;
	document.getElementById("alert_box").style.filter='alpha(opacity=' + alert_opacity*100 + ')';
	if(alert_opacity > 0){
		alert_opacity = alert_opacity - 0.1;
		fade_out = setTimeout('alert_fade_out()', 30);
	} else {
		alert_opacity = 1.0;
		document.getElementById("alert_box").style.display="none";
		document.getElementById("alert_box").style.opacity=alert_opacity;
		document.getElementById("alert_box").style.MozOpacity=alert_opacity;
		document.getElementById("alert_box").style.filter="";
	}
}

var quick_info_opacity = 1.0;
var fade_int = null;

function thumb_over(image){
	document.getElementById(image).style.border="1px solid #880000";
	
	document.getElementById("quick_title").innerHTML = portfolio[image][1];
	document.getElementById("quick_desc").innerHTML = portfolio[image][2];
	document.getElementById("quick_work").innerHTML = portfolio[image][3];
	
	document.getElementById("quick_info").style.opacity = "1.0";
	document.getElementById("quick_info").style.MozOpacity = "1.0";
	document.getElementById("quick_info").style.filter = "";
	document.getElementById("quick_info").style.display="block";
	quick_info_opacity = 1.0;
	clearInterval(fade_int);
	
	/* //=====category highlighting =========
	if(filter == "all"){
		var cat = portfolio[image][4];
		document.getElementById("cat_web").style.color = "#999999";
		document.getElementById("cat_print").style.color = "#999999";
		document.getElementById("cat_logo").style.color = "#999999";
		document.getElementById("cat_" + cat).style.color = "#880000"; //current cat
	}
	*/
	//document.getElementById(image).style.MozOpacity="1.0";	
}
	
function thumb_out(image){
	/* //======category highlighting========
	if(filter == "all"){
		document.getElementById("cat_web").style.color = "";
		document.getElementById("cat_print").style.color = "";
		document.getElementById("cat_logo").style.color = "";
	}
	*/
	document.getElementById(image).style.border="1px solid #999999";
	fade_int = setInterval("quick_info_fade()", 10);
	
	//document.getElementById(image).style.MozOpacity="0.7";	
}
	
function quick_info_fade(){
	if(quick_info_opacity > 0){
		quick_info_opacity -= 0.1;
		document.getElementById("quick_info").style.opacity = quick_info_opacity;
		document.getElementById("quick_info").style.MozOpacity = quick_info_opacity;
		document.getElementById("quick_info").style.filter = "alpha(opacity = '" + quick_info_opacity*100 + "')";
	} else {
		clearInterval(fade_int);
	}
}

function view_image(image){
	var data = "<img id='image' src='portfolio/images/" + portfolio[image][0] + ".jpg'><p class='portfolio_title'>" + portfolio[image][1] + "<span class='portfolio_desc'> | " + portfolio[image][2] + "</span></p><p class='portfolio_work'><span style='color: #999999'>Work: </span>" + portfolio[image][3] + "</p>";
	
	document.getElementById("image_container").innerHTML=data;
	document.getElementById("image_viewer").style.display="block";
}
	
function hide_image(){
	document.getElementById("image_viewer").style.display="none";
}

var mov_y = 0;
var speed = 50; //smaller is faster
var scroll_int = null;
var column_height = 0;
var browser=navigator.userAgent;
var firefox=browser.search(/Firefox/);
var filter="all"

function start_scroll(){
	column_height = document.getElementById("thumbs").offsetHeight;
	scroll_int = setInterval("scroll()", 10);
}

function scroll_speed(event){
	var y = event.clientY;
	mov_y = (360 - y)/speed;
}

function scroll(){
	var top = document.getElementById("thumbs").offsetTop;
	if(firefox > 0){top += 3.5;}
	if (mov_y > 0){
		if(top < -5){
			document.getElementById("thumbs").style.top = mov_y + top + "px";
		}
	} else {
		if((top + column_height) > 315){
			document.getElementById("thumbs").style.top = mov_y + top + "px";
		}
	}
}

function end_scroll(){
	clearInterval(scroll_int);
}

function filter_cat(cat){
	filter = cat;
	document.getElementById("thumbs").style.top = -5 + "px";
	for(i = 0; i < portfolio.length; i++){
		if(portfolio[i][4] == filter || filter == "all"){
			document.getElementById(i).style.display = "block";
		} else {
			document.getElementById(i).style.display = "none";
		}
	}
	
	var thumbs_height = document.getElementById("thumbs").offsetHeight;
	if(thumbs_height < 310){
		document.getElementById("thumbs_area").style.height = (thumbs_height - 10) + "px";
	} else {
		document.getElementById("thumbs_area").style.height = 310 + "px";
	}
	
	document.getElementById("cat_all").style.color = "";
	document.getElementById("cat_web").style.color = "";
	document.getElementById("cat_print").style.color = "";
	document.getElementById("cat_logo").style.color = "";
	
	document.getElementById("cat_" + cat).style.color = "#880000"; //current cat
}