//Globals

var activeBtn;
var browser = navigator.appName;
var mrgSize = 0;
var mrg = 34;
var transparency = 1;
var transparencyIE = 100;
var imgUrlSmall = "img/small/";
var imgUrlBig = "img/big/";
var timeoutId;
var auto = true;
var newImg;

// BTN EVENTS
function btnBoxOver(obj) {
	obj.style.backgroundColor = "#FF8B00";
}
function btnBoxOut(obj) {
	if(activeBtn == obj){
		activeBtn.style.backgroundColor = "#FF8B00";
	}else{	
		obj.style.backgroundColor = "";
	}
	setInvisible('image_txt_layer');
}

function btnBoxExtClick(id, imgName) {
	obj = document.getElementById(id);
	auto = false;
	setActiveButton(obj);
	document.getElementById('image_txt_layer').style.marginTop = 0;		
	setVisible('image_overlay');
	setVisible('image_txt_layer');
	document.getElementById('image_description').innerHTML = obj.title;

	LoadImg(imgUrlSmall + imgName, obj.title);
	LoadBigImg(imgUrlBig + imgName, obj.title);
}
function btnBoxExtOut(id) {
	obj = document.getElementById(id);
	if(activeBtn == obj){
		activeBtn.style.backgroundColor = "#FF8B00";
	}else{	
		obj.style.backgroundColor = "";
	}
	setInvisible('image_txt_layer');
}
function btnBoxClick(obj, imgName) {

	auto = false;
	setActiveButton(obj);
	document.getElementById('image_txt_layer').style.marginTop = 0;		
	setVisible('image_overlay');
	setVisible('image_txt_layer');
	document.getElementById('image_description').innerHTML = obj.title;

	LoadImg(imgUrlSmall + imgName, obj.title);
	LoadBigImg(imgUrlBig + imgName, obj.title);
}

function btnBoxAutoClick(id, imgName) {
	obj = document.getElementById(id);
	
	setActiveButton(obj);
	setVisible('image_txt_layer');
	document.getElementById('image_description').innerHTML = obj.title;
	timeoutIdtxt = setTimeout("slideVerticalDown ('image_txt_layer')", 4000);
/*
	if(LoadImg(imgUrlSmall + imgName, obj.title)){
		setVisible('image_txt_layer');
		document.getElementById('image_description').innerHTML = obj.title;
		timeoutIdtxt = setTimeout("slideVerticalDown ('image_txt_layer')", 4000);
	}
*/
	newImg = new Image();
	LoadImg(imgUrlSmall + imgName, obj.title);
	LoadBigImg(imgUrlBig + imgName, obj.title);
}

function setActiveButton(obj){
	if(activeBtn) {
		activeBtn.style.backgroundColor = "";
	}	
	activeBtn = obj;
	obj.parentNode.style.backgroundColor = "#000000";
	obj.style.backgroundColor = "#FF8B00";
}

//
function dissolveLayer(id){	
	obj = document.getElementById(id);
	
	if(browser == "Microsoft Internet Explorer"){
		dissolveLayerIE(id);
	}else{	
	transparency = transparency - 0.04;
		if(transparency > 0){
			obj.style.opacity = transparency  ;
			timeoutIdTrans = setTimeout("dissolveLayer ('image_overlay')", 24);
		}else{
			clearTimeout(timeoutIdTrans);
			transparency  = 1;
			obj.style.opacity = transparency;
			obj.style.visibility = "hidden";
					
		}
	}
}
function dissolveLayerIE(id){
	obj = document.getElementById(id);
	obj.style.filter = "alpha(opacity=" + 100 + ")";
	transparencyIE = transparencyIE - 5;
	if(transparencyIE  > 0){
		obj.style.filter = "alpha(opacity=" + transparencyIE + ")";
		timeoutIdTrans = setTimeout("dissolveLayerIE ('image_overlay')", 24);
	}else{
		transparencyIE  = 100;
		obj.style.filter = "alpha(opacity=" + transparencyIE + ")";
		obj.style.visibility = "hidden";
		clearTimeout(timeoutIdTrans);		
	}
}	
function slideVerticalDown(id){
			
	if(!auto){
		return;
	}
	
	obj = document.getElementById(id);	
	mrgSize = mrgSize + 1;
	
	if(mrgSize < mrg){
		obj.style.marginTop = mrgSize + "px" ;
		timeoutIdtxt = setTimeout("slideVerticalDown ('image_txt_layer')", 12);
	}else{
		clearTimeout(timeoutIdtxt);	
		obj.style.visibility = "hidden";
		obj.style.marginTop = 0;			
	}
}

function clearSlideVertical(id){
	obj = document.getElementById(id);	
	clearTimeout(timeoutIdtxt);	
	obj.style.visibility = "hidden";
	obj.style.marginTop = 0;		
}

// SCROLL
function goDown(id){
	var el = document.getElementById(id);
	var scrHeight = el.scrollHeight; 
	var offHeight = el.offsetHeight; 
	var scrollSize = scrHeight - offHeight ;
	
	if(el.scrollTop < scrollSize){
		el.scrollTop = el.scrollTop + 12;
	}else{
		el.scrollTop = scrollSize;
		clearTimeout(timeoutId);
	}

	timeoutId = setTimeout("goDown('view')", 30);
}

function goUp(id){
	var el = document.getElementById(id);
	
	if(el.scrollTop > 0){
		el.scrollTop = el.scrollTop - 12;
		timeoutId = setTimeout("goUp('view')", 30);
	}else{
		el.scrollTop = 0;
		clearTimeout(timeoutId);
	}

}

function stopScrolling(){
	clearTimeout(timeoutId);
}
//IMAGES
function LoadImg(imgSrc, descript)
{
  var newImgS = new Image();
  newImgS.onload = function() {
	document.getElementById('js_image').src = imgSrc;
	document.getElementById('js_image').title = descript;	
	dissolveLayer ('image_overlay');
  }
  newImgS.src = imgSrc;
  return true;
}

function LoadBigImg(imgSrc, descript)
{
	newImg = new Image();
  
	newImg.onload = function() {
		
		imgWidth = newImg.width;
		imgHeight = newImg.height;
		canvasW = imgWidth + 40 ;
		canvasH = imgHeight + 68 ;
		
		resizeElement(document.getElementById('transcanvas'), canvasW, canvasH);
		resizeElement(document.getElementById('js_box_img'), newImg.width, newImg.height);
		
		document.getElementById('js_box_img').src = imgSrc;
		document.getElementById('js_box_txt').innerHTML = descript;	
	}
  newImg.src = imgSrc;
}
var timer;

function resizeElementSlowly(obj, toWidth, toHeight){
	
	 var width  = parseInt(obj.style.width);
	 var height = parseInt(obj.style.height);
	 var changeW = toWidth - width;
	 var changeH = toHeight - height;
	 var totalW = width + Math.ceil((changeW/10));
	 var totalH = height + Math.ceil((changeH/10));
	
	 
	 obj.style.width = totalW + 'px';
	 obj.style.height = totalH + 'px';
	 
	 function c() {
		   resizeElementSlowly(obj, toWidth, toHeight);
	 }
	 
	 if(changeW == 0) {
	  clearTimeout(timer);
	  return;
	 }
	 
	 timer = setTimeout(c,12);
}
function resizeElement(obj, toWidth, toHeight){

	obj.style.width = toWidth + 'px';
	obj.style.height = toHeight + 'px';
}

// GENERAL
function chgBackgroundImage(id, url){
	document.getElementById(id).style.backgroundImage= url;
}

function setInvisible(id){
	document.getElementById(id).style.visibility = "hidden";

}
function setVisible(id){
	document.getElementById(id).style.visibility = "visible";

}

function showID(id) {
	document.getElementById(id).style.display = "block";
}

function hideID(id) {
	document.getElementById(id).style.display = "none";
}

function printPage(){
	window.print();
}