function onTagItem(caller){
	caller.style.backgroundColor="#FFCCCC"
}

function outTagItem(caller){
	caller.style.backgroundColor="#FFFFFF"
}

function sortViewCount(a, b) {
    var x = Number(b.fpCount);
    var y = Number(a.fpCount);
    return x - y;
    //return ((x < y) ? 0 : ((x > y) ? 1 : -1));
}

function sortID(a, b) {
    var x =  Number(b.fpID);
    var y =  Number(a.fpID);
    return x - y;
    //return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}

function paging(){
	this.returnURL		= "";
	this.specificTag	= "";
	this.viewMode		= "mostviewed";
	this.timePeriod		= "alwaysSelect";
	this.tagID		= 0;

	this.currentPage 	= 1;
	this.picturesPerPage	= 50;
	this.pageCount		= 0;
	this.objectName		= "";	

	this.pictureList 	= [];
	this.checkList		= [];

	this.changeTime		= changeTime;
	this.changeMode		= changeMode;
	this.draw		= draw;
	this.next		= next;
	this.prev		= prev;
	this.setObjectName	= setObjectName;
	this.picture 		= picture;
	this.addPicture 	= addPicture;
	this.updateNavigation	= updateNavigation;
	this.getNavHTML		= getNavHTML;
	this.getBodyHTML	= getBodyHTML;
	this.tagObject		= new tags();
	this.addTag		= addTag;
	this.getTagHTML		= getTagHTML;
	this.addCheck		= addCheck;
	this.checkObject	= checkObject;
	this.setChecked		= setChecked;
	this.getChecked		= getChecked;
	this.setTagID		= setTagID;
	this.setSpecificTag	= setSpecificTag;
	this.getSubTags		= getSubTags;
	this.drawFooter		= drawFooter;
	this.gotoPage		= gotoPage;
	this.newTag		= newTag;
	this.setReturnURL	= setReturnURL;
	this.initPage		= initPage;
	this.setPicturesPerPage	= setPicturesPerPage;

	function setPicturesPerPage(picsPerPage){
		this.picturesPerPage	= picsPerPage;
	}

	function initPage(){
		var currentPage = readCookie("pageNumber");
		if(currentPage == null){
			this.currentPage = 1;
		} else {
			this.currentPage = Number(currentPage);
		}
		var timePeriod = readCookie("timePeriod");
		if(timePeriod == null){
			this.timePeriod = "alwaysSelect";
		} else {
			this.timePeriod = timePeriod;
		}
		var currentTag = readCookie("tagID");
		if(currentTag == null){
			this.tagID = 0;
		} else {
			this.tagID = currentTag;
		}
	}

	function setReturnURL(returnURL){
		this.returnURL = returnURL;
	}

	function newTag(){
		var tagName = prompt("What tag would you like to add?");
		var foundTag = false;
		if(tagName == null){
			return;
		} else if(tagName == ""){
			alert("Can't have an empty tag name.");
			return;
		} 

		for(var i=0;i<this.tagObject.tagList.length;i++){
			var currentTag 	= this.tagObject.tagList[i];
			var cTagName	= currentTag.tagName;
			if(cTagName == tagName){
				foundTag = true;
			}
		}

		if(foundTag){
			alert(tagName+" is already in use.");
			return
		} else {
			xmlhttpPostTag(tagName, this.specificTag)
		} 
	}

	function gotoPage(page){
		this.currentPage 	= page;
		this.draw();
		createCookie("pageNumber",page,"");
	}

	function drawFooter(){
		var footerObject = document.getElementById("footer");
		if(footerObject != null){
			this.pageCount		= Math.ceil(this.pictureList.length/this.picturesPerPage);
			var footerHTML = "";
			for(var i=1; i<=this.pageCount;i++){
				if(this.currentPage == i){
					footerHTML = footerHTML + "<font>"
				} else {
					footerHTML = footerHTML + "<font style='color:#0000FF;cursor:pointer;text-decoration:underline' onclick=Paging.gotoPage("+i+")>"
				}
				footerHTML = footerHTML + i;
				footerHTML = footerHTML + "</font> "
			}
			footerObject.innerHTML = footerHTML;
		}
	}

	function setSpecificTag(specificTag){
		this.specificTag = specificTag;
		var contentObject 	= document.getElementById("content");
		var strURL	= "timeData.cgi?a=a&period=week&tag="+specificTag;
		//this.timePeriod		= "always"
		contentObject.innerHTML = "Loading Pictures...";
		xmlhttpPostPaging(strURL);

	}

	function setTagID(tagID){
		this.tagID	= tagID ;
		createCookie("tagID",this.tagID,10);
		var contentObject 	= document.getElementById("content");
		var ddObject = document.getElementById("timeObject");
		this.changeTime(ddObject);

	}

	function getChecked(){
		var checkedList = ""
		for(var i = 0; i < Paging.checkList.length; i++){
			var checkedObject = Paging.checkList[i];
			if(checkedObject.checkState){
				checkedList = checkedList + checkedObject.fpID + ",";
			}
		}
		return checkedList
	}

	function setChecked(fpID, caller, index){
		Paging.checkList[index].checkState = caller.checked
		var chkObject = Paging.checkList[index];
	}

	function addCheck(checkState,fpID){
		var nextIndex	= this.checkList.length;
		this.checkList[this.checkList.length] = new this.checkObject(checkState,fpID);
		return nextIndex;
	}	

	function checkObject(checkState,fpID){
		this.checkState = checkState;
		this.fpID	= fpID;
		return this;
	}

	function addTag(tagID, tagName, tagCount){
		//alert("add tag " + tagID + "-" + tagName + "-" + tagCount)
		this.tagObject.addTagObject(tagID, tagName, tagCount);
	}

	function changeTime(caller){
		var contentObject 	= document.getElementById("content");
		var strURL	= "timeData.cgi?a=a&period="+caller.value+"&tag="+this.tagID+"&parentTag="+this.specificTag;
		if(this.tagID == "untagged"){		
			//alert("not working yet!!! " + strURL)
			// we need to send the parent id
			//return
			
		}


		if(this.specificTag == ""){

		} else {
			if(this.tagID == ""){
				strURL	= "timeData.cgi?a=a&period="+caller.value+"&tag="+this.specificTag;
			}
		}

		if(caller.value == "week"){
			this.timePeriod		= "lastweek"
		} else if(caller.value == "year"){
			this.timePeriod		= "yearSelect"
		} else if(caller.value == "month"){
			this.timePeriod		= "monthSelect"
		} else if(caller.value == "today"){
			this.timePeriod		= "todaySelect"
		} else if(caller.value == "always"){
			this.timePeriod		= "alwaysSelect"
		}
		//alert(strURL)
		createCookie("timePeriod",this.timePeriod,10);
		contentObject.innerHTML = "Loading Pictures...";
		xmlhttpPostPaging(strURL);

	}

	function changeMode(caller){
		this.viewMode = caller.value;
		this.draw();
	}

	function draw(){
		var contentObject 	= document.getElementById("content");
		var contentHTML		= this.getNavHTML();
		contentHTML		= contentHTML + this.getBodyHTML();
		contentObject.innerHTML = contentHTML;
		Paging.drawFooter();
	}

	function next(){
		this.currentPage 	= this.currentPage + 1;
		createCookie("pageNumber",this.currentPage,"");
		this.draw();
	}

	function prev(){
		this.currentPage 	= this.currentPage - 1;
		createCookie("pageNumber",this.currentPage,"");
		this.draw();
	}

	function getBodyHTML(){
		this.checkList	= [];
		var contentHTML = "";
		var startIndex	= (this.currentPage - 1)*this.picturesPerPage;
		var endIndex	= startIndex + this.picturesPerPage;
		var lastIndex	= this.pictureList.length - 1;
		if(lastIndex < endIndex){endIndex = lastIndex;}

		if(this.viewMode == "newest"){
			this.pictureList.sort(sortID);
		} else {
			this.pictureList.sort(sortViewCount);
		}

		for(var i=startIndex; i <= endIndex; i++){
			var picture = this.pictureList[i];
			var path = picture.fpDir + "/thumb" + picture.fpName
			contentHTML		= contentHTML + "<div align='center' style='float:left;width:320px;height:285px;overflow:auto;text-align:left'>";
			var checkIndex = this.addCheck(false,picture.fpID);
			contentHTML		= contentHTML + "<input onclick='Paging.setChecked("+picture.fpID+",this,"+checkIndex+")' id='cb"+picture.fpID+"' name='cb"+picture.fpID+"' type='checkbox'><br>";

			contentHTML		= contentHTML + "<a href='pic.php?count="+picture.fpCount+"&dir="+picture.fpDir+"&fileName="+picture.fpName+"&id="+picture.fpID+"&return="+Paging.returnURL+"'>";
			contentHTML		= contentHTML + "<img border=0 src='" + path + "'>";
			contentHTML		= contentHTML + "</a><br>";
			contentHTML		= contentHTML + picture.fpTitle;
			contentHTML		= contentHTML + " ("+picture.fpCount+")";
			contentHTML		= contentHTML + "&nbsp;<br>";
			contentHTML		= contentHTML + picture.fpDesc;
			contentHTML		= contentHTML + "&nbsp;<br>";
			contentHTML		= contentHTML + picture.fpDate;
			contentHTML		= contentHTML + "</div>";
		}		
		return contentHTML;
	}

	function getNavHTML(){
		var viewNew 	= "";
		var viewMost	= "";
		if(this.viewMode == "newest"){
			viewNew 	= " selected ";
		} else {
			viewMost	= " selected ";
		}
		var prevPage	= this.currentPage - 1;
		var startIndex	= (this.currentPage - 1)*this.picturesPerPage + 1;
		var endIndex	= startIndex + this.picturesPerPage - 1;
		this.pageCount	= Math.ceil(this.pictureList.length/this.picturesPerPage);
		var navHTML 	= "<table style='border:1px solid black;width:250px;float:left;margin:25px'>";
		navHTML		= navHTML + "<tr>";
		navHTML		= navHTML + "<td>";
		navHTML		= navHTML + "<select id='dateDropDown' onchange='"+this.objectName+".changeMode(this)' style='float:left'>";
		navHTML		= navHTML + "<option "+viewMost+" value='mostviewed'>Most Viewed</option>";
		navHTML		= navHTML + "<option "+viewNew+" value='newest'>Most Recent</option>";
		navHTML		= navHTML + "</select>[]";
		
		var weekSelect 	= "";
		var yearSelect 	= "";
		var monthSelect	= "";
		var alwaysSelect= "";
		var todaySelect = "";

		if(this.timePeriod == "lastweek"){
			weekSelect = " selected ";
		} else if(this.timePeriod == "yearSelect"){
			yearSelect 	= " selected ";
		} else if(this.timePeriod == "monthSelect"){
			monthSelect 	= " selected ";
		} else if(this.timePeriod == "todaySelect"){
			todaySelect 	= " selected ";
		} else if(this.timePeriod == "alwaysSelect"){
			alwaysSelect 	= " selected ";
		}

		navHTML		= navHTML + "<select id='timeObject' onchange='"+this.objectName+".changeTime(this)' style='float:left'>";
		navHTML		= navHTML + "<option value='always'>Always</option>";
		navHTML		= navHTML + "<option "+todaySelect+" value='today'>Today</option>";
		navHTML		= navHTML + "<option "+weekSelect+" value='week'>1 Week</option>";
		navHTML		= navHTML + "<option "+monthSelect+" value='month'>1 Month</option>";
		navHTML		= navHTML + "<option "+yearSelect+" value='year'>1 Year</option>";
		navHTML		= navHTML + "</select>";
		navHTML		= navHTML + "<div style='text-align:right'>";
		if(this.specificTag == ""){	
			navHTML		= navHTML + "<a href='about.php'>about</a>";
		} else {
			navHTML		= navHTML + "&nbsp;";
		}
		navHTML		= navHTML + "</div></td>";
		navHTML		= navHTML + "</tr>";
		navHTML		= navHTML + "<tr>";
		navHTML		= navHTML + "<td>";
		navHTML		= navHTML + "<div style='min-height:440px' id='tagSection'>";
		navHTML		= navHTML + this.getTagHTML();
		navHTML		= navHTML + "</div>";
		navHTML		= navHTML + "</td>";
		navHTML		= navHTML + "</tr>";
		navHTML		= navHTML + "<tr>";
		navHTML		= navHTML + "<td align='center'>";
		navHTML		= navHTML + "<div id='pageCount'>Page "+this.currentPage
		navHTML		= navHTML + " of "+this.pageCount+"("+startIndex + "-" + endIndex + " of " 
		navHTML		= navHTML + this.pictureList.length+" pictures)<br><span onclick='getPicsPerPage()' style='color:#0000FF;cursor:pointer'>[pics per page]</span></div>";
		navHTML		= navHTML + "<div id='navigation'>";
		if(this.currentPage == 1){
			navHTML		= navHTML + "<< Prev";
		} else {
			navHTML		= navHTML + "<a onclick='"+this.objectName+".prev()' style='color:#0000FF;cursor:pointer'><< Prev</a>";
		}
		navHTML		= navHTML + " | ";
		if(this.currentPage == this.pageCount){
			navHTML		= navHTML + "Next >>";
		} else {
			navHTML		= navHTML + "<a onclick='"+this.objectName+".next()' style='color:#0000FF;cursor:pointer'>Next >></a>";
		}
		navHTML		= navHTML + "</div>";
		navHTML		= navHTML + "</td>";
		navHTML		= navHTML + "</tr>";
		navHTML		= navHTML + "</table>";
		return navHTML;
	}

	function getTagHTML(){
		var tagHTML = "";
		var tagObj = this.tagObject;
		for(var i=0;i<this.tagObject.tagList.length;i++){
			var currentTag = this.tagObject.tagList[i];
			var bgColor = "#FFFFFF";
			if(this.tagID == currentTag.tagID){
				bgColor = "#CCFFCC";
			}

			tagHTML = tagHTML + "<div onmouseout='outTagItem(this)' onmouseover='onTagItem(this)' id='tagItem"+currentTag.tagID+"' style='width:240px;float:left;padding:0px 0px 0px 0px;background-color:"+bgColor+"'>" 
			tagHTML = tagHTML + "<div style='float:left;text-decoration:underline;color:#0000FF;cursor:pointer' onclick='Paging.setTagID("+currentTag.tagID+")'>" + currentTag.tagName + "</div> <div style='float:left'>(" + currentTag.tagCount + ")</div>" 
			tagHTML = tagHTML + "<img onclick='showTagOptions("+currentTag.tagID+")' style='float:right;cursor:pointer;padding:2px 0px 2px 0px'  src='apply.gif' alt='Apply Tag' width=15 height=15 />"
			tagHTML = tagHTML + "<div style='position:absolute;display:none;background-color:#FFFFFF;border:1px solid black;padding:2px;text-align:center' id='show"+currentTag.tagID+"'></div>";
			tagHTML = tagHTML + "</div><br>";
		}
		
		if(this.specificTag == ""){
			var bgColor = "#FFFFFF";
			if(this.tagID == "U"){
				bgColor = "#CCFFCC";
			}
			tagHTML = tagHTML + "<div id='tagItemU' style='padding:0px 20px 0px 0px;background-color:"+bgColor+"'>" 
			tagHTML = tagHTML + "<div style='float:left;text-decoration:underline;color:#0000FF;cursor:pointer;background-color:"+bgColor+"'' onclick='Paging.setTagID(\"U\")'> Untagged </div> <div style='float:left'></div>" 
			tagHTML = tagHTML + "<img onclick='showTagOptions(\"U\")' style='float:right;cursor:pointer;visibility:hidden'  src='apply.gif' alt='Apply Tag' width=15 height=15 />"
			tagHTML = tagHTML + "<div style='position:absolute;display:none;background-color:#FFFFFF;border:1px solid black;padding:2px;text-align:center' id='showU'></div>";
			tagHTML = tagHTML + "</div><br clear='all'>";

			var bgColor = "#FFFFFF";
			if(this.tagID == "0"){
				bgColor = "#CCFFCC";
			}
			tagHTML = tagHTML + "<div id='tagItemU' style='padding:0px 20px 0px 0px;background-color:"+bgColor+"'>" 
			tagHTML = tagHTML + "<div style='float:left;text-decoration:underline;color:#0000FF;cursor:pointer;background-color:"+bgColor+"'' onclick='Paging.setTagID(\"0\")'> All Tags </div> <div style='float:left'></div>" 
			tagHTML = tagHTML + "<img style='float:right;cursor:pointer;visibility:hidden'  src='apply.gif' alt='Apply Tag' width=15 height=15 />"
			tagHTML = tagHTML + "<div style='position:absolute;display:none;background-color:#FFFFFF;border:1px solid black;padding:2px;text-align:center' id='showU'></div>";
			tagHTML = tagHTML + "</div>";
		} else {
			tagHTML = tagHTML + this.getSubTags();
		}

		return tagHTML;
	}

	function getSubTags(){
		var subTagHTML = "";
		subTagHTML = "<div style='text-decoration:underline;color:#0000FF;cursor:pointer' onclick='Paging.setTagID(\"\")'>See All</div>";
		subTagHTML = subTagHTML + "<div style='text-decoration:underline;color:#0000FF;cursor:pointer' onclick='Paging.newTag()'>New Tag</div>";
		
		var bgColor = "#FFFFFF";
		if(this.tagID == "untagged"){
			bgColor = "#CCFFCC";
		}
			subTagHTML = subTagHTML + "<div style='background-color:"+bgColor+";text-decoration:underline;color:#0000FF;cursor:pointer' onclick='Paging.setTagID(\"untagged\")'>Untagged</div>";
		
		return subTagHTML;
	}

	function setObjectName(objectName){	
		this.objectName	= objectName;
	}

	function picture(fpID, fpDir, fpName, fpDate, fpTitle, fpDesc, fpCount){
		this.fpID	= fpID;
		this.fpDir	= fpDir;
		this.fpName	= fpName;
		this.fpDate	= fpDate;
		this.fpTitle	= fpTitle;
		this.fpDesc	= fpDesc; 
		this.fpCount	= fpCount;
		return this;
	}
	
	function addPicture(fpID, fpDir, fpName, fpDate, fpTitle, fpDesc, fpCount){
		this.pictureList[this.pictureList.length] = new this.picture(fpID, fpDir, fpName, fpDate, fpTitle, fpDesc, fpCount)
	}

	function updateNavigation(){
		var pageCountObject 	= document.getElementById("pageCount");
		var navObject 		= document.getElementById("navigation");
		this.pageCount		= Math.ceil(this.pictureList.length/this.picturesPerPage);
		//pageCountObject.innerHTML = "Page "+this.currentPage +" of " + this.pageCount;
		
		var navHTML = "";
		if(this.currentPage == 1){
			navHTML = "&lt;&lt; Prev"
		} else {
			navHTML = "<a href='#'>&lt;&lt; Prev</a>"
		}
		
		if(this.currentPage == this.pageCount){
			navHTML = navHTML + " Next &gt;&gt;";
		} else {
			navHTML = navHTML + " <a style='color:#0000FF;cursor:pointer' onclick='"+this.objectName+".next()'>Next &gt;&gt;</a>"
		}
	}

}