var whadup_div,about_cotton_div,what_they_say_div,photo_gallery_div;
var selectedSectionId,selectedCellId;
var browser=navigator.appVersion;
var contentReady;
var contentType = "application/x-www-form-urlencoded; charset=UTF-8";

function getWidth(div){
	if(browser.indexOf("MSIE")!=1){
		return div.offsetWidth;
	}else{
		return parseInt(div.style.width.substring(0,div.style.width.indexOf('px')));
	}
}
function getHeight(div){
	if(browser.indexOf("MSIE")!=1){
		return div.offsetHeight;
	}else{
		return parseInt(div.style.height.substring(0,div.style.height.indexOf('px')));
	}
}
function getTop(div){return parseInt(div.style.top.substring(0,div.style.top.indexOf('px')));}
function getLeft(div){return parseInt(div.style.left.substring(0,div.style.left.indexOf('px')));}
function setWidth(div,w){div.style.width=w+'px';}
function setHeight(div,h){div.style.height=h+'px';}
function setTop(div,t){div.style.top=t+'px';}
function setLeft(div,l){div.style.left=l+'px';}
function setColor(div,color){div.style.backgroundColor="#"+color;}
function setVisible(div){div.style.visibility='visible';}
function setHidden(div){div.style.visibility='hidden';}

function initDivObjects(){
	whadup_div=getObject("WHADUP_DIV");
	whadup_inner_div=getObject("WHADUP_INNER_DIV");
	about_cotton_div=getObject("ABOUT_COTTON_DIV");
	about_cotton_inner_div=getObject("ABOUT_COTTON_INNER_DIV");
	what_they_say_div=getObject("WHAT_THEY_SAY_DIV");
	what_they_say_inner_div=getObject("WHAT_THEY_SAY_INNER_DIV");
	photo_gallery_div=getObject("PHOTO_GALLERY_DIV");
	photo_gallery_inner_div=getObject("PHOTO_GALLERY_INNER_DIV");
}

function createXmlHttpRequest(){
	var xmlHttp;
	try {xmlHttp = new XMLHttpRequest();} catch (trymicrosoft) {
		try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (othermicrosoft) {
			try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (failed) {xmlHttp = false;}
		}
	}
	return xmlHttp;
	if (!xmlHttp)alert("Error initializing XMLHttpRequest!");
}

function getObject(divId){
	if(browser.indexOf("MSIE")!=1){obj=document.getElementById(divId);}else{obj=document.all[divId];}
	return obj;
}

function resetPage(){
	resetSectionsContent();
	initSectionsPosition();
	initSectionsContent();
	moveUpDownDiv('OPEN_TIME_DIV',375,true);
}

function resetSectionsContent(){
	whadup_inner_div.innerHTML="";
	about_cotton_inner_div.innerHTML="";
	what_they_say_inner_div.innerHTML="";
	photo_gallery_inner_div.innerHTML="";
	setVisible(whadup_div);
	setVisible(about_cotton_div);
	setVisible(what_they_say_div);
	setVisible(photo_gallery_div);
}

function initSectionsPosition(){
	setObjectStyle("WHADUP_DIV",190,250,20,125);
	setObjectStyle("ABOUT_COTTON_DIV",190,320,210,125);
	setObjectStyle("WHAT_THEY_SAY_DIV",190,320,400,125);
	setObjectStyle("PHOTO_GALLERY_DIV",190,280,590,125);
}

function setObjectStyle(divId,w,h,l,t){
	div=getObject(divId);
	setWidth(div,w);
	setHeight(div,h);
	setLeft(div,l);
	setTop(div,t);
}

function initSectionsContent(){
	insertSectionContent("WHADUP","55100B","440E0A");
	insertSectionContent("ABOUT_COTTON","A88728","866C21");
	insertSectionContent("WHAT_THEY_SAY","754D0B","5E3E0A");
	insertSectionContent("PHOTO_GALLERY","7E752F","3B3614");
	
}

function insertSectionContent(sectionId,sectionTitleColor,sectionTextColor){
	var div=getObject(sectionId+"_INNER_DIV");
	var params="?SECTION_ID="+sectionId;
	params+="&SECTION_TITLE_COLOR="+sectionTitleColor;
	params+="&SECTION_TEXT_COLOR="+sectionTextColor;
	var xmlHttp=createXmlHttpRequest();
	xmlHttp.open("GET","section.php"+params, true);
	xmlHttp.onreadystatechange =function(){
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200){
				div.innerHTML = xmlHttp.responseText;
				initLightbox();
				setVisible(div);
			}else if(xmlHttp.status == 404){
				div.innerHTML = "Request URL does not exist";
			}else{
				div.innerHTML = "Error. Status code = " + xmlHttp.status;
			}
		}
	}
	xmlHttp.send(null);
}

function resetSection(sectionId){
	switch(sectionId){
		case "WHADUP":shrinkSection(sectionId,190,250,20);break;
		case "ABOUT_COTTON":shrinkSection(sectionId,190,320,210);break;
		case "WHAT_THEY_SAY":shrinkSection(sectionId,190,320,400);break;
		case "PHOTO_GALLERY":shrinkSection(sectionId,190,280,590);break;
	}
}

function expandSection(sectionId){
	var updateScript,color,lpos,dw,dh;
	if(selectedSectionId!=undefined && selectedSectionId!=sectionId){
		selectedDiv=getObject(selectedSectionId+"_DIV");
		selectedInnerDiv=getObject(selectedSectionId+"_INNER_DIV");
		selectedInnerDiv.innerHTML="";
		resetSection(selectedSectionId);
	}

	currDivId=sectionId+"_DIV";
	currInnerDivId=sectionId+"_INNER_DIV";
	currDiv=getObject(currDivId);
	currInnerDiv=getObject(currInnerDivId);
	setVisible(currDiv);
	switch(sectionId){
		case "WHADUP":
			setHidden(currInnerDiv);
			if(selectedSectionId=="PHOTO_GALLERY"){insertSectionContent("PHOTO_GALLERY","7E752F","3B3614");}
			moveUpDownDiv('OPEN_TIME_DIV',530,false);
			setHidden(about_cotton_div);setHidden(about_cotton_inner_div);
			setHidden(what_they_say_div);setHidden(what_they_say_inner_div);
			updateSection(currInnerDiv,"whadup.php","55100B");
			setColor(currDiv,'440E0A');
			growSection(sectionId,570,400,20,true);
			break;
		case "WHAT_THEY_SAY":
			setHidden(currInnerDiv);
			if(selectedSectionId=="PHOTO_GALLERY"){insertSectionContent("PHOTO_GALLERY","7E752F","3B3614");}
			moveUpDownDiv('OPEN_TIME_DIV',530,false);
			setHidden(about_cotton_div);setHidden(about_cotton_inner_div);
			setHidden(whadup_div);setHidden(whadup_inner_div);
			updateSection(currInnerDiv,"wts.php","754D0B");
			setColor(currDiv,'5E3E0A');
			growSection(sectionId,570,400,20,true);
			break;
		case "ABOUT_COTTON":
			setVisible(currInnerDiv);
			if(selectedSectionId=="PHOTO_GALLERY"){insertSectionContent("PHOTO_GALLERY","7E752F","3B3614");}
			if(selectedSectionId=="WHADUP"){insertSectionContent("WHADUP","55100B","440E0A");};
			moveUpDownDiv('OPEN_TIME_DIV',375,true);
			setVisible(currDiv);setVisible(currInnerDiv);
			setVisible(whadup_div);setVisible(whadup_inner_div);
			setHidden(what_they_say_div);setHidden(what_they_say_inner_div);
			updateSection(currInnerDiv,"about.php","A88728");
			setColor(currDiv,'866C21');
			growSection(sectionId,380,400,210,false);
			break;
		case "PHOTO_GALLERY":
			setHidden(currInnerDiv);
			if(selectedSectionId=="WHADUP"){insertSectionContent("WHADUP","55100B","440E0A");};
			moveUpDownDiv('OPEN_TIME_DIV',375,true);
			setVisible(whadup_div);setVisible(whadup_inner_div);
			setHidden(about_cotton_div);setHidden(about_cotton_inner_div);
			setHidden(what_they_say_div);setHidden(what_they_say_inner_div);
			updateSection(currInnerDiv,"photo_gallery.php","7E752F");
			setColor(currDiv,'3B3614');	
			growSection(sectionId,570,445,210,true);
			break;
	}
	selectedSectionId=sectionId;
}

function updateSection(div,updateScript,scrollBarColor,bHorizontal){
	// Retrieve dynamic content
	contentReady=false;
	var xmlHttp = createXmlHttpRequest();
	xmlHttp.open("GET",updateScript, true);
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200){
				div.innerHTML = xmlHttp.responseText;
				switch(div.id){
					case "PHOTO_GALLERY_INNER_DIV":	
						initHorizontalScrollArea("GALLERY",scrollBarColor);
						var firstGalleryId=getObject("GALLERY_TABLE").rows[0].cells[0].id;
						openGallery(parseInt(firstGalleryId.substring(firstGalleryId.lastIndexOf("_")+1)));
						break;
					case "WHAT_THEY_SAY_INNER_DIV":
						initLightbox();
						initVerticalScrollArea("WHAT_THEY_SAY",scrollBarColor);
						break;
					case "ABOUT_COTTON_INNER_DIV":
						initLightbox();
						initVerticalScrollArea("ABOUT_COTTON",scrollBarColor);
						break;
					case "WHADUP_INNER_DIV":
						initLightbox();
						initVerticalScrollArea("WHADUP",scrollBarColor);
						break;
					case "CM_CONTENT":
						initLightbox();
						if(bHorizontal){
							setWidth(cmContent,getObject("GALLERY_TABLE").rows[0].cells.length*135);
							initHorizontalScrollArea('CM',scrollBarColor);
						}else{
							initVerticalScrollArea('CM',scrollBarColor);
						}
						break;
				}
			}else if(xmlHttp.status == 404){
				div.innerHTML = "Request URL does not exist";
			}else{
				div.innerHTML = "Error. Status code = " + xmlHttp.status;
			}
		}
	}
	xmlHttp.send(null);
}

function growSection(sectionId,wMx,hMx,lPos,bShow){
	div=getObject(sectionId+"_DIV");
	innerDiv=getObject(sectionId+"_INNER_DIV");
	l=getLeft(div);
	w=getWidth(div);
	h=getHeight(div);
	w+=10;if(w>wMx){w=wMx;}
	h+=10;if(h>hMx){h=hMx;}
	if(l>lPos){setLeft(div,l-10);}
	setWidth(div,w);
	setHeight(div,h);
	if (w<wMx || h<hMx || l>lPos) {
		timeout = setTimeout("growSection('"+sectionId+"',"+wMx+","+hMx+","+lPos+","+bShow+");", 1);
	}else{
		if(bShow){setVisible(innerDiv);};
	}
}

function shrinkSection(sectionId,wMn,hMn,lPos){
	div=getObject(sectionId+"_DIV");
	l=getLeft(div);
	w=getWidth(div);
	h=getHeight(div);
	w-=10;if(w<wMn){w=wMn;}
	h-=10;if(h<hMn){h=hMn;}
	if(l<lPos){setLeft(div,l+10);}
	setWidth(div,w);
	setHeight(div,h);
	if (w>wMn || h>hMn || l<lPos) {
		timeout = setTimeout("resetSection('"+sectionId+"',"+wMn+","+hMn+","+lPos+");", 1);
	}
}

function openGallery(galleryId,imgPath){
	var xmlHttp = createXmlHttpRequest();
	photo_content=getObject("PHOTO_CONTENT");
	setTop(photo_content,0);
	setTop(getObject("PHOTO_SCROLLER"),0);
	if(selectedCellId!=undefined){setColor(getObject(selectedCellId),'7E752F');}
	gallery_cell=getObject("GALLERY_TD_"+galleryId);
	setColor(gallery_cell,'848F48');
	xmlHttp.open("GET","open_gallery.php?GALLERY_ID="+galleryId,true);
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200){
				photo_content.innerHTML = xmlHttp.responseText;
				initVerticalScrollArea("PHOTO","3B3614");
				initLightbox();
			}else if(xmlHttp.status == 404){
				photo_content.innerHTML = "Request URL does not exist";
			}else{
				photo_content.innerHTML = "Error. Status code = " + xmlHttp.status;
			}
		}
	}
	xmlHttp.send(null);
	selectedCellId="GALLERY_TD_"+galleryId;
}


function initHorizontalScrollArea(sectionId,scrollColor){
	var scrollarea=getObject(sectionId+"_SCROLL_AREA");
	var scroller=getObject(sectionId+"_SCROLLER");
	var container=getObject(sectionId+"_CONTAINER");
	var content=getObject(sectionId+"_CONTENT");

	setColor(scroller,scrollColor);
    // get object width
    var content_w = getWidth(content);
    var container_w = getWidth(container);
    var scrollarea_w = getWidth(scrollarea);
    //calculate width of scroller and resize the scroller div
    var scroller_w = (container_w / content_w) * scrollarea_w;
	if(container_w<content_w){
		setWidth(scroller,Math.round(scroller_w));
		//what is the effective scroll distance once the scoller's width has been taken into account
		var scroll_dist = Math.round(scrollarea_w-scroller_w);
		//make the scroller div draggable
		Drag.init(scroller,null,0,scroll_dist,0,0,false,true);
		//add onDrag function
		scroller.onDrag = function (x,y) {
		 var scrollX = getLeft(scroller);
		 var docX = (scrollX * (content_w - container_w) / scroll_dist);
		 setLeft(content,-docX);
		}
		setVisible(scroller);
	}else{
		setHidden(scroller);
	}
}

function initVerticalScrollArea(sectionId,scrollColor){
	var scrollarea=getObject(sectionId+"_SCROLL_AREA");
	var scroller=getObject(sectionId+"_SCROLLER");
	var container=getObject(sectionId+"_CONTAINER");
	var content=getObject(sectionId+"_CONTENT");
	setColor(scroller,scrollColor);
    // get object height
    var content_h = getHeight(content);
    var container_h = getHeight(container);
    var scrollarea_h = getHeight(scrollarea);  
    //calculate width of scroller and resize the scroller div
    var scroller_h = (container_h / content_h) * scrollarea_h;
    if(container_h<content_h){
		setVisible(scroller);
		setHeight(scroller,Math.round(scroller_h));
		//what is the effective scroll distance once the scoller's width has been taken into account
		var scroll_dist = Math.round(scrollarea_h-scroller_h);
		//make the scroller div draggable
		Drag.init(scroller,null,0,0,0,scroll_dist,true,false);
		//add onDrag function
		scroller.onDrag = function (x,y) {
		  var scrollY = getTop(scroller);
		  var docY = (scrollY * (content_h - container_h) / scroll_dist);
		 setTop(content,-docY);
		}
		setVisible(scroller);
	}else{
		setHidden(scroller);
	}
}

function moveUpDownDiv(divId,t,bUp){
	var iid=0;
	var div=getObject(divId);
	var f = function(){
		divTPos = getTop(div);
		if(bUp){nVPos=divTPos-t>3?divTPos-3:t;}else{nVPos=t-divTPos>3?divTPos+3:t;}
		if((nVPos<t && !bUp)||(nVPos>t && bUp)){ setTop(div,nVPos);}
		if(nVPos==t){ clearInterval(iid);}
	}
	iid = setInterval(f,1);
}

function moveLeftRightDiv(divId,p,bLeft){
	var iid=0;
	var div=getObject(divId);
	var f = function(){
		divLPos = getLeft(div);
		if(bLeft){nHPos=divLPos-p>3?divLPos-3:p;}else{nHPos=p-divLPos>3?divLPos+3:p;}
		if((nHPos<p && !bLeft)||(nHPos>p && bLeft)){setLeft(div,nHPos);}
		if(nHPos==p) {clearInterval(iid);}
	}
	iid = setInterval(f,1);
}

function showEmailDiv(bShow,img_filename){
	if(bShow){
		var xmlHttp = createXmlHttpRequest();
		xmlHttp.open("GET","send_email.php?ACTION=edit&IMG_FILENAME="+img_filename,true);
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState == 4){
				if(xmlHttp.status == 200){
					Element.setInnerHTML("emailDiv", xmlHttp.responseText);
					Element.show('emailDiv');
				}else if(xmlHttp.status == 404){
					Element.setInnerHTML("emailDiv", "Request URL does not exist");
				}else{
					Element.setInnerHTML("emailDiv", "Error. Status code = " + xmlHttp.status);
				}
			}
		}
		xmlHttp.send(null);
	}else{
		Element.hide('emailDiv');
	}
}

function sendEmail(){
	from=getObject("FROM").value;
	to=getObject("TO").value
	msg=getObject("MSG").value;
	subject="Cottons'Shanghai: "+getObject("SUBJECT").value;
	img_filename=getObject("IMG_FILENAME").value;
	var xmlHttp = createXmlHttpRequest();
	params="ACTION=send&FROM="+from+"&TO="+to+"&MSG="+msg+"&SUBJECT="+subject+"&IMG_FILENAME="+img_filename;
	xmlHttp.open("POST","send_email.php",true);
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200){
				alert(xmlHttp.responseText);
				//Element.setInnerHTML("EMAIL_STATUS", xmlHttp.responseText);
			}else if(xmlHttp.status == 404){
				Element.setInnerHTML("EMAIL_STATUS", "Request URL does not exist");
			}else{
				Element.setInnerHTML("EMAIL_STATUS", "Error. Status code = " + xmlHttp.status);
			}
		}
	}
	xmlHttp.setRequestHeader("Content-Type", contentType);
	xmlHttp.send(params);
}

function download(img_filename){
	newWindow=window.open("download.php?IMG_FILENAME="+img_filename.substring(img_filename.lastIndexOf("/")+1), 'Download','width=200,height=100');
}