var curr_img;
var curr_proj;
var isanim = 0;
var img_total = 0;
var info_i;
var info_int;
var info_open = false;

function getWindowHeight() {
	var windowHeight = 0;
	if (typeof(window.innerHeight) == 'number') {
		windowHeight = window.innerHeight;
	}
	else {
		if (document.documentElement && document.documentElement.clientHeight) {
			windowHeight = document.documentElement.clientHeight;
		}
		else {
			if (document.body && document.body.clientHeight) {
				windowHeight = document.body.clientHeight;
			}
		}
	}
	return windowHeight;
}
function setContent() {
	if (document.getElementById) {
		var windowHeight = getWindowHeight();
		if (windowHeight > 0) {
			var contentElement = document.getElementById('rr_projholder');
			var contentHeight = 600;//contentElement.offsetHeight;
			if (windowHeight - contentHeight > 0) {
				contentElement.style.position = 'relative';
				contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2) - 30) + 'px';
			}
			else {
				contentElement.style.position = 'static';
			}
		}
	}
}
window.onresize = function() {
	setContent();
}

document.onkeyup  = function(e) {
	var evt = (window.event) ? event : e;
	if (evt.keyCode == 37) {
		window.scrollTo(0, 0);
		if (evt.preventDefault) {
			evt.preventDefault();
		}
		prevImage();
	} else if (evt.keyCode == 39) {
		window.scrollTo(0, 0);
		if (evt.preventDefault) { 
			evt.preventDefault();
		}
		nextImage();
	}
}

function imageObj(u, w, h, b) {
	this.url = u;
	this.width = w;
	this.height = h;
	this.body = b;
}

function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }  
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function getRandomSelect() {
	var col_arr = new Array();
	col_arr[0] = 'FFC000'; // YELLOW
	col_arr[1] = 'FF7E00'; // ORANGE
	col_arr[2] = '00A8FF'; // BLUE
	col_arr[3] = '88D717'; // GREEN
	var ran = Math.floor(3.999 * Math.random());
	return '333333';//col_arr[ran];
}

function setupImages(id) {
	curr_proj = id;
	var img_div = document.getElementById('rr_gallery');
	var holder = document.getElementById('rr_projholder');
	var op = '';
	curr_img = 1;
	for (var i = 1; i <= img_total; i++) {
		var isbody = '';
		if (this['i'+i+'_obj'].body != '') {
			isbody = '<div id="i'+i+'_'+t+'_body" style="width: '+(this['i'+i+"_obj"].width-10)+'px" class="img_body"><div class="tl"></div><div class="t" style="width: '+(this['i'+i+"_obj"].width-20)+'px"></div><div class="tr"></div><div class="m">'+this['i'+i+"_obj"].body+'</div><div class="bl"></div><div class="b" style="width: '+(this['i'+i+"_obj"].width-20)+'px"></div><div class="br"></div></div>';
		}
		if (i == 1) {
			op += "\t"+'<div class="rr_gallery_node"><div id="i'+i+'" style="background-image: url('+root+'images/'+this['i'+i+"_obj"].url+'); background-position: 0px center; width: '+this['i'+i+"_obj"].width+'px;" class="rr_gallery_image" onClick="toggleImage(\''+i+'\')" onMouseOver="imgOver(\''+i+'\')" onMouseOut="imgOut(\''+i+'\')"><img id="img_'+i+'" src="'+root+'images/'+this['i'+i+"_obj"].url+'" style="display:none" /><div id="i'+i+'_ov" class="overlay_off">'+isbody+'</div></div></div>'+"\n";
		} else {
			op += "\t"+'<div class="rr_gallery_node"><div id="i'+i+'" style="background-image: url('+root+'images/'+this['i'+i+"_obj"].url+'); background-position: -200px center; width: 25px;" class="rr_gallery_image" onClick="toggleImage(\''+i+'\')" onMouseOver="imgOver(\''+i+'\')" onMouseOut="imgOut(\''+i+'\')"><img id="img_'+i+'" src="'+root+'images/'+this['i'+i+"_obj"].url+'" style="display:none" /><div id="i'+i+'_ov" class="overlay_on">'+isbody+'</div></div></div>'+"\n";
		}
	}
	img_div.innerHTML = op;
	img_div.style.width = getTotalWidth()+'px';
	holder.style.width = (getTotalWidth()+600)+'px';
	for (var i = 1; i <= img_total; i++) {
		changeOpac(0, 'i'+i);
		this['i'+i+'_loadint'] = setInterval('checkImageLoaded(\''+i+'\')', 10);
	}
	setContent();
}

function checkImageLoaded(id) {
	var img = document.getElementById('img_'+id);
	if (img.complete != false) {
		clearInterval(this['i'+id+'_loadint']);
		opacity('i'+id, 0, 100, 1000);
	}
}

function nextImage() {
	if (isanim == 0) {
		toggleImage('next');
	}
}

function prevImage() {
	if (isanim == 0) {
		toggleImage('prev');
	}
}

function showImage(id) {
	var img = document.getElementById('i'+id);
	this['i'+id+'_i'] = 0;
	this['i'+id+'_int'] = setInterval('showImageJump(\''+id+'\')', 10);
	var imgov = document.getElementById('i'+id+'_ov');
	imgov.className = 'overlay_off';
}

function showImageJump(id) {
	this['i'+id+'_i']++;
	var img = document.getElementById('i'+id);
	var gallery = document.getElementById('rr_gallery');
	var holder = document.getElementById('rr_projholder');
	var w = getWidth(img);
	var x = getBackgroundPosition(img);
	if (w > (this['i'+id+'_obj'].width-10)) {
		if (w != this['i'+id+'_obj'].width) {
			img.style.width = (w+1)+'px';
			gallery.style.width = getTotalWidth()+'px';
			holder.style.width = (getTotalWidth()+600)+'px';
		}
		if (x != 0) {
			img.style.backgroundPosition = (x+1)+'px center';
		}
		if (w == this['i'+id+'_obj'].width && x == 0) {
			clearInterval(this['i'+id+'_int']);
			isanim = 0;
			gallery.style.width = getTotalWidth()+'px';
			holder.style.width = (getTotalWidth()+600)+'px';
		}
	} else {
		img.style.width = (w + Math.ceil((this['i'+id+'_obj'].width - w) / 10))+'px';
		img.style.backgroundPosition = (x + Math.ceil(0 - x / 10))+'px center';
		gallery.style.width = getTotalWidth()+'px';
		holder.style.width = (getTotalWidth()+600)+'px';
	}
}

function hideImage(id) {
	var img = document.getElementById('i'+id);
	this['i'+id+'_i'] = 20;
	this['i'+id+'_int'] = setInterval('hideImageJump(\''+id+'\')', 10);
	var imgov = document.getElementById('i'+id+'_ov');
	imgov.className = 'overlay_on';
}

function hideImageJump(id) {
	this['i'+id+'_i']--;
	var img = document.getElementById('i'+id);
	var w = getWidth(img);
	var x = getBackgroundPosition(img);
	if (w < 35) {
		if (w != 25) {
			img.style.width = (w-1)+'px';
		}
		if (x != -200) {
			img.style.backgroundPosition = (x-1)+'px center';
		}
		if (w == 25 && x == -200) {
			clearInterval(this['i'+id+'_int']);
			isanim = 0;
		}
	} else {
		img.style.width = (w + Math.floor((25 - w) / 10))+'px';
		img.style.backgroundPosition = (x + Math.floor((-200 - x) / 10))+'px center';
	}
}

function showInfo() {
	info_i = 0;
	info_int = setInterval('showInfoJump()', 10);
}

function showInfoJump() {
	info_i++;
	var info = document.getElementById('rr_projinfo');
	var w = getWidth(info);;
	if (w > 335) {
		if (w != 345) {
			info.style.width = (w+1)+'px';
		} else {
			clearInterval(info_int);
			info_open = true;
			isanim = 0;
		}
	} else {
		info.style.width = (w + Math.ceil((345 - w) / 10))+'px';
	}
}

function hideInfo(id) {
	info_i = 20;
	info_int = setInterval('hideInfoJump()', 10);
}

function hideInfoJump(id) {
	info_i--;
	var info = document.getElementById('rr_projinfo');
	var w = getWidth(info);
	if (w < 35) {
		if (w != 25) {
			info.style.width = (w-1)+'px';
		} else {
			clearInterval(info_int);
			info_open = false;
			isanim = 0;
		}
	} else {
		info.style.width = (w + Math.ceil((25 - w) / 10))+'px';
	}
}

function getBackgroundPosition(div) {
	var str = div.style.backgroundPosition;
	var arr = str.split("px");
	var xpos = parseInt(arr[0]);
	return xpos;
}

function getWidth(div) {
	var str = div.style.width;
	var arr = str.split("px");
	var w = parseInt(arr[0]);
	return w;
}

function getTotalWidth() {
	var total_width = 0;
	for (var i=1; i<=img_total; i++) {
		var img = document.getElementById('i'+i);
		total_width += getWidth(img) + 5;
	}
	return total_width + 20;
}

function toggleImage(id) {
	if (id == 'next') {
		if (parseInt(curr_img) == img_total) {
			var new_img = 1;
		} else {
			var new_img = parseInt(curr_img) + 1;
		}
	} else if (id == 'prev') {
		if (parseInt(curr_img) == 1) {
			var new_img = img_total;
		} else {
			var new_img = parseInt(curr_img) - 1;
		}
	} else {
		var new_img = id;
	}
	if (parseInt(new_img) != parseInt(curr_img) && isanim == 0) {
		isanim = 1;
		showImage(new_img.toString());
		hideImage(curr_img.toString());
		curr_img = new_img;
	}	
}

function toggleInfo() {
	isanim = 1;
	if (info_open) {
		hideInfo();
	} else {
		showInfo();
	}	
}

function imgOver(id) {
	if (id == 'next') {
		if (parseInt(curr_img) == img_total) {
			var new_img = 1;
		} else {
			var new_img = parseInt(curr_img) + 1;
		}
	} else if (id == 'prev') {
		if (parseInt(curr_img) == 1) {
			var new_img = img_total;
		} else {
			var new_img = parseInt(curr_img) - 1;
		}
	} else {
		var new_img = id;
	}
	if (parseInt(curr_img) != parseInt(new_img)) {
		var imgov = document.getElementById('i'+new_img.toString()+'_ov');
		imgov.className = 'overlay_off';
	}
}

function imgOut(id) {
	if (id == 'next') {
		if (parseInt(curr_img) == img_total) {
			var new_img = 1;
		} else {
			var new_img = parseInt(curr_img) + 1;
		}
	} else if (id == 'prev') {
		if (parseInt(curr_img) == 1) {
			var new_img = img_total;
		} else {
			var new_img = parseInt(curr_img) - 1;
		}
	} else {
		var new_img = id;
	}
	if (parseInt(curr_img) != parseInt(new_img)) {
		var imgov = document.getElementById('i'+new_img.toString()+'_ov');
		imgov.className = 'overlay_on';
	}
}

function btnOver(id) {
	var btnbody = document.getElementById('p'+id+'_btn');
	btnbody.style.backgroundColor = '#'+getRandomSelect();
	btnbody.style.color = '#FFFFFF';
}

function btnOut(id) {
	var btnbody = document.getElementById('p'+id+'_btn');
	btnbody.style.backgroundColor = '#F8F8F8';
	btnbody.style.color = '#1E1E1E';
}

function afcbOver(col) {
	var btnbody = document.getElementById('afcb_link');
	btnbody.style.backgroundColor = '#'+col;
}

function afcbOut() {
	var btnbody = document.getElementById('afcb_link');
	btnbody.style.backgroundColor = '#ccc';
}