var currentlydisplayed=0;

var picsrc_array = new Array();
var inResidential=false;
var idCurrSection=0;

var rightclip = 0;
var leftclip = 549;
var scrollvariation = 0;
var leftvariation=0;
var picmenutop=0;
var picmenuleft=0;
var origpicmenuleft=0;
var scrollingleft=false;
var scrollingright=false;
var mindisp=1;
var maxdisp=0;
var minleftvariation=0;

var portfoliofadingout=false;
var portfoliofadingin=false;
var picsUpdated=false;
//Array to store pics in order to determine if they are loaded or not when trying to display them. If not, then display loading gif instead. 
var picArray = new Array();

var resSections_arr=new Array();
resSections_arr[0]=new section("caobaolu", 16, 2910,"Hongqiao", "Apartment", "Construction Interior Design", "250 Sqm");
resSections_arr[1]=new section("dingxilu", 5, 1005,"Changning District", "Apartment", "Construction Interior Design", "120 Sqm");
resSections_arr[2]=new section("fahuazhenlu", 7, 1360,"Changning District", "Apartment", "Construction Interior Design", "240 Sqm");
resSections_arr[3]=new section("nanjinglu", 7, 1201,"Jingan District", "Apartment", "Construction Interior Design", "140 Sqm");
resSections_arr[4]=new section("pudongavenue", 6, 1284,"Pudong District", "Apartment", "Construction Interior Design", "350 Sqm");
resSections_arr[5]=new section("shanxilu", 9, 2037,"Luwan District", "Apartment", "Construction Interior Design", "110 Sqm");
resSections_arr[6]=new section("xiangyanglu", 5, 1060,"Changning District", "Apartment", "Construction Interior Design", "140 Sqm");
resSections_arr[7]=new section("yuyuanlu", 5, 1812 ,"Changning District", "Old House", "Construction Interior Design", "200 Sqm");
resSections_arr[8]=new section("office", 7, 1737,"Jingan District", "Office", "Construction Interior Design", "300 Sqm");
resSections_arr[9]=new section("hotelmadiba", 5, 1804,"Pointe noire - Congo", "Hotel", "Interior Design Furnitures", "3000 Sqm");
resSections_arr[10]=new section("restau570", 3, 668,"Luwan District", "Apartment", "Construction Interior Design", "120 Sqm");
resSections_arr[11]=new section("saleya", 3, 753,"Luwan District", "Restaurant", "Construction Interior Design", "115 Sqm");
resSections_arr[12]=new section("workinprogress", 8, 1859,"Luwan District", "Old House", "Construction Interior Design", "180 Sqm"); 
resSections_arr[13]=new section("maominglu", 7, 1028,"Luwan District", "Apartment", "Construction Interior Design", "110 Sqm");
resSections_arr[14]=new section("jinhuilu", 9, 2650,"Changning District", "Apartment", "Construction Interior Design", "90 Sqm");
resSections_arr[15]=new section("heidelberg", 5, 1415,"Paris - France", "Office & Factory", "Interior Design Consultant", "120 Sqm & 300 Sqm");
resSections_arr[16]=new section("jiaotong", 18, 5242,"Jiao Tong", "Offices & Conferences room", "Interior Design Consultant", "1500 Sqm");
resSections_arr[17]=new section("welloffice", 8, 2003,"Paris - France", "Office", "Interior Design Consultant", "750 Sqm");
resSections_arr[18]=new section("motorpress", 2, 551,"Issy les Moulineaux - France", "Office", "Interior Design Consultant", "2500 Sqm");
resSections_arr[19]=new section("wellfactory", 6, 1907,"Montpellier - France", "Factory", "Interior Design Consultant", "9000 Sqm");
resSections_arr[20]=new section("bernabiotech", 6, 1850,"Yan'an dong Road", "Office", "Construction Interior Design", "118 Sqm");

function section(name, nbpics, width, location, type, project, size) {
	this.name=name;
	this.nbpics=nbpics;
	this.width=width;
	this.innerHTML="";
	var tmppicname="";
	this.location=location;
	this.type=type;
	this.project=project;
	this.size=size;
	
	for (i=1; i<=this.nbpics; i++) {
		tmppicname=name+''+i;
		this.innerHTML+='<img id="'+tmppicname+'" src="pictures/'+name+'/'+tmppicname+'.jpg" style="border-left:1px solid #FFF"/>';
	}
}

function getResSection(x) {
	for (i=0; i<resSections_arr.length; i++) {	
		if ((resSections_arr[i].min <= x) && (x <= resSections_arr[i].max)) {
			return resSections_arr[i];
		}
	}
}
//function to display "loading gif" while pic is loading. 
function downloadpic(x, topic) {
		divp=document.getElementById("mainpicdiv");
		if (picArray[x].src.match(".html") != null) {
			//to initialize correctly src in Safari! 
			picArray[x].src = picsrc_array[x];
		}
		if (picArray[x].src.length == 0) {
			//initializing src for other browsers
			picArray[x].src = picsrc_array[x];
		}
		if (picArray[x].complete) {
			//var vtodefade = document.getElementById("vi"+x);
			//setOpacity(vtodefade, 100);
			var img = document.getElementById("displaypic");
			if (currentlydisplayed==x) {
				/*ph=picArray[x].height;
				pw=picArray[x].width;
				if (ph > 350) {
					divp.style.height="350px";	
					img.style.height = ph+"px";					
				} else {
					divp.style.height = ph+"px";
					img.style.height = ph+"px";
				}
				if (pw > 525) {
					divp.style.width="525px";
					img.style.width = pw+"px";
				} else {
					divp.style.width = pw+"px";
					img.style.width = pw+"px";
				}*/
				var img = document.getElementById("displaypic");
				img.src = picArray[x].src;
			}
		} else {
			if (currentlydisplayed==x) {
				var loadimg = document.getElementById("displaypic");
				if (loadimg.src.match("loading") == null) {
					loadimg.src = "loading.gif";
					//loadimg.style.height="4px";
					//loadimg.style.width="80px";
				}
				//divp.style.height="70px";
			}
			toaction="downloadpic('"+x+"', 'portfolio')";
			var tt=setTimeout(toaction,500);
		}
}
function disppic(id) {
	var pic2disp = picsrc_array[id];
	var mainpic = document.getElementById("displaypic");
	//mainpic.src=pic2disp;
	currentlydisplayed=id;
	downloadpic(id, "portfolio");
	if (inResidential) {
		var imgsection=getResSection(id);
		var currsection=resSections_arr[idCurrSection];
		if (imgsection.name != currsection.name) {
			for (k=currsection.min; k<=currsection.max; k++) {
				var img=document.getElementById("img"+k);
				setOpacity(img, 50);
			}	
			for (i=imgsection.min; i<=imgsection.max; i++) {
				var img=document.getElementById("img"+i);
				setOpacity(img, 100);
			}		
			var dispdesc = document.getElementById("description");
			dispdesc.innerHTML=imgsection.name;
			idCurrSection=imgsection.idx;
		}	
	}
}

function scrollright(step, speed) {
	if (scrollingleft) {
		return
	}
	var portfoliopicmenu=document.getElementById("imgscontainer");
	var bigvariationright=leftvariation-speed;

	if (bigvariationright <= minleftvariation) {
		var leftover=leftvariation-minleftvariation;
		leftvariation-=leftover;
		rightclip+=leftover;
		leftclip+=leftover;
		picmenuleft-=leftover;
		portfoliopicmenu.style.left=picmenuleft+"px";
		portfoliopicmenu.style.clip="rect(0px,"+leftclip+"px,266px,"+rightclip+"px)";		
		scrollvariation=0;
		scrollingright=false;
		return;
	}
	scrollingright=true;	
	var variationForecast=scrollvariation+speed;
	if (variationForecast < step) {
		leftvariation-=speed;
		rightclip+=speed;
		leftclip+=speed;
		picmenuleft-=speed;
		portfoliopicmenu.style.left=picmenuleft+"px";
		var clipstr="rect(0px,"+leftclip+"px,266px,"+rightclip+"px)";
		portfoliopicmenu.style.clip="rect(0px,"+leftclip+"px,266px,"+rightclip+"px)";
		scrollvariation+=speed;
		t = setTimeout("scrollright("+step+", "+speed+")", 100);
	} else {	
		var leftover=step-scrollvariation;
		leftvariation-=leftover;
		rightclip+=leftover;
		leftclip+=leftover;
		picmenuleft-=leftover;
		portfoliopicmenu.style.left=picmenuleft+"px";
		//var clipstr="rect(0px,"+leftclip+"px,266,"+rightclip+"px)";
		portfoliopicmenu.style.clip="rect(0px,"+leftclip+"px,266px,"+rightclip+"px)";		
		scrollvariation=0;
		scrollingright=false;
	}
}
function scrollleft(step, speed) {
	if (scrollingright) {
		return
	}
	var portfoliopicmenu=document.getElementById("imgscontainer");
	var bigvariationForecast=leftvariation+speed;
	if (bigvariationForecast >= 0) {
		var leftover=leftvariation+speed-bigvariationForecast;
		leftvariation+=leftover;
		rightclip-=leftover;
		leftclip-=leftover;
		picmenuleft+=leftover;
		portfoliopicmenu.style.left=picmenuleft+"px";
		portfoliopicmenu.style.clip="rect(0px,"+leftclip+"px,266px,"+rightclip+"px)";
		scrollingleft=false;
		scrollvariation=0;		
		return;
	}
	scrollingleft=true;
	
	var variationForecast=scrollvariation+speed;
	if (variationForecast < step) {
		leftvariation+=speed;
		rightclip-=speed;
		leftclip-=speed;
		picmenuleft+=speed;
		portfoliopicmenu.style.left=picmenuleft+"px";
		portfoliopicmenu.style.clip="rect(0px,"+leftclip+"px,266px,"+rightclip+"px)";
		scrollvariation+=speed;
		t = setTimeout("scrollleft("+step+", "+speed+")", 100);
	} else {
		var leftover=step-scrollvariation;
		leftvariation+=leftover;
		rightclip-=leftover;
		leftclip-=leftover;
		picmenuleft+=leftover;
		portfoliopicmenu.style.left=picmenuleft+"px";
		portfoliopicmenu.style.clip="rect(0px,"+leftclip+"px,266px,"+rightclip+"px)";
		scrollingleft=false;		
		scrollvariation=0;
	}
}
function jumpTo(sectionIdx) {
	//picsUpdated=false;
	//fadeOut("imgscontainer", 95, 10);
	//changePortfolioPic(sectionIdx);
	//fadeIn("imgscontainer", 0, 10);
		var destinationSection = resSections_arr[sectionIdx];
		var imgscontainer=document.getElementById("imgscontainer");			
		//alert("origpicmenuleft="+origpicmenuleft);
		imgscontainer.style.left=origpicmenuleft+"px";	
		picmenuleft=origpicmenuleft;
		imgscontainer.style.width=destinationSection.width+"px";
		imgscontainer.style.clip="rect(0px,549px,267px,0px)";		
		minleftvariation=550-destinationSection.width
		imgscontainer.innerHTML=destinationSection.innerHTML;	
		
		var locationtd=document.getElementById("locationtd");
		var typetd=document.getElementById("typetd");
		var sizetd=document.getElementById("sizetd");
		var projecttd=document.getElementById("projecttd");
		locationtd.innerHTML=destinationSection.location;
		typetd.innerHTML=destinationSection.type;
		sizetd.innerHTML=destinationSection.size;
		projecttd.innerHTML=destinationSection.project;

		//reinitialising all variables:
		rightclip = 0;
		leftclip = 549;
		scrollvariation = 0;
		leftvariation=0;
		scrollingleft=false;
		scrollingright=false;
}
function changePortfolioPic(section) {
	var todo="changePortfolioPic("+section+")";
	if (portfoliofadingout || portfoliofadingin) {
		window.setTimeout(todo, 100);
	} else {
		var destinationSection = resSections_arr[section];
		var imgscontainer=document.getElementById("imgscontainer");	
		imgscontainer.style.width=destinationSection.width+"px";
		imgscontainer.style.left=origpicmenuleft+"px";
		minleftvariation=550-destinationSection.width
		imgscontainer.innerHTML=destinationSection.innerHTML;
		picsUpdated=true;
	}
}
	function unveil() {
		var portfoliotopdiv=document.getElementById("portfoliotopdiv");
		var preloading=document.getElementById("preloading");
		portfoliotopdiv.style.display="block";
		preloading.style.display="none";
	}

function fadeIn(objId,opacity, speed) {
	//alert("objid="+objId)
	if ((portfoliofadingout) || (!picsUpdated)) {
		window.setTimeout("fadeIn('"+objId+"',"+opacity+", "+speed+")", 300);
		return;
	}
	portfoliofadingin=true;
	
	if (document.getElementById) {
	    obj = document.getElementById(objId);
	    if (opacity <= 100) {
		  protfoliofadedout=false;
	      setOpacity(obj, opacity);
	      opacity += speed;
	      window.setTimeout("fadeIn('"+objId+"',"+opacity+", "+speed+")", 100);
	    } else {
			portfoliofadingin=false;
		}
		
	}
}

function fadeOut(objId,opacity, speed) {
	if (portfoliofadingin) {
		window.setTimeout("fadeOut('"+objId+"',"+opacity+", "+speed+")", 500);
		return;
	} 
	portfoliofadingout=true;		
	if (document.getElementById) {
	    obj = document.getElementById(objId);
	    if (opacity >= 0) {
			setOpacity(obj, opacity);
			opacity -= speed;
			window.setTimeout("fadeOut('"+objId+"',"+opacity+", "+speed+")", 100);
		} else {
			portfoliofadingout=false;
		}
	}
}