var maxDays = 31;
var treeOffset = 0;


var treeObject = null;

function loadPicTree(){
	runServerOperation( 'xml/treeInfo.jso'+"?a="+Math.floor(Math.random()*100), null, loadPicTree_Callback, null )
}

function loadPicTree_Callback( reqObj, returnObject ){
	treeObject = returnObject;
	drawPicTree( 0 );
}

function drawPicTree( offset ){
	if( typeof offset != "number" ) offset=0;

	var msPerDay = 1000 * 60 * 60 * 24;
	var today = new Date();
	
	picTreeHTML = "";
	picTreeHTML += "<div id='DateLine' style='border-left:0px;' class='text dateline'>";
	if( offset > 0 ) {picTreeHTML += "<img src='images/uparrow.gif' style='cursor:pointer;' onclick='drawPicTree("+(offset-5)+");'><br>";}
	if( offset > 0 ) {tMax = maxDays - 1;} else {tMax = maxDays;}
	for( var i=offset; i<(offset+tMax); i++ ){
		var thisDay = new Date(today.getTime() - msPerDay*i);
		picTreeHTML += thisDay.getDate() + "<br>";
	}
	picTreeHTML += "<img src='images/downarrow.gif' style='cursor:pointer;' onclick='drawPicTree("+(offset+5)+");'><br>";
	picTreeHTML += "</div>";
	
	<!-- ---------------------------- Month Line ---------------------------- -->
	
	var startPos = 0;
	var mStart = new Date(today.getTime() - msPerDay * offset);
	while( startPos < maxDays ){
		var mEnd = new Date(mStart.getFullYear(), mStart.getMonth(), 1, 0, 0, 0, 0);
		var length = Math.floor( (mStart.getTime()-mEnd.getTime()) / msPerDay ) + 1;
		
		if( (length + startPos) > maxDays ) length = maxDays - startPos;
		
		if( offset > 0 ){	
			top = 15 + startPos * 15;
			if( (length + startPos) == maxDays )
				height = (length-1) * 15 - 1;
			else
				height = length * 15;
		}
		else{
			top = startPos * 15;
			height = length * 15;
		}
		var monthsListShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
		var monthsListLong = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

		var monthCaption = monthsListLong[mStart.getMonth()] + " " + mStart.getFullYear();
		if( monthCaption.length * 3/4 > length ) monthCaption = monthsListShort[mStart.getMonth()] + " " + mStart.getFullYear();
		if( monthCaption.length * 3/4 > length ) monthCaption = monthsListLong[mStart.getMonth()];
		if( monthCaption.length * 3/4 > length ) monthCaption = monthsListShort[mStart.getMonth()];
		if( monthCaption.length * 3/4 > length ) monthCaption = "";
		var mc = "";

		for( i=0; i<monthCaption.length; i++ ){
			mc += monthCaption.substr(i, 1) + "<br>";
		}
		
		picTreeHTML += "<div class='monthline' style='left:105px; top:"+top+"px; width:11px; height:"+height+"px;'>"+mc+"</div>";
		picTreeHTML += "<div style='position:absolute; left:105px; top:0px; height:"+(15*(maxDays+1))+"px; border-left:1px SOLID #000;'></div>";
		mStart.setDate( mEnd.getDate() - 1 );
		startPos += length;
	}
	
	
	
	picTreeHTML += "<div id='picViewer' class='text item_selected' style='visibility:hidden; position:absolute; left:196px; width:126px; height:108px;'></div>";
	
	for( i=0; i<treeObject.pics.length; i++ ){
		day = treeObject.pics[i].day;
		month = treeObject.pics[i].month;
		year = treeObject.pics[i].year;
		imgUrl = treeObject.pics[i].img;
		numPics = treeObject.pics[i].numPics;
		
		var picSetDate = new Date(year, month-1, day, 0, 0, 0, 0);
		dayIndex = Math.floor( ((today.getTime() - picSetDate.getTime()) / msPerDay - offset) );
		
		if( ( dayIndex >= 0 ) && (dayIndex < tMax) ) {
			var top =  dayIndex * 15 + 1;
			if( offset > 0 ){ top += 15; }
			picTreeHTML += "<div id='picDay" + i + "' class='item_unselected' style='position:absolute; top:"+top+"; left:136; height:13px; width:60px;' ";
			picTreeHTML += "onMouseOver='selectTreeLine(this, " + i + ");' ";
			picTreeHTML += "onMouseOut='deselectTreeLine(this, " + i + ");' ";
			picTreeHTML += "onClick='openPics("+year+","+month+","+day+");' ";
			picTreeHTML += ">";
			
			for( var j=0; j<(numPics/10); j++ ){
				left = 2 + j * 7;
				picTreeHTML += "<div style='position:absolute; height:5; width:5; background:#AAF; top:3; left:" + left + ";'><font style='font-size:1px'>&nbsp;</font></div>";
			}
			picTreeHTML += "</div>";
		}
	}

	<!-- ----------------------------- Captions ----------------------------- -->
	for( i=0; i<treeObject.events.length; i++ ){
		day   = treeObject.events[i].day;
		month = treeObject.events[i].month;
		year  = treeObject.events[i].year;
		name  = treeObject.events[i].name;
		
		var capSetDate = new Date(year, month-1, day, 0, 0, 0, 0);
		dayIndex = Math.floor( ((today.getTime() - capSetDate.getTime()) / msPerDay - offset) );
		if( ( dayIndex >= 0 ) && ( dayIndex < tMax ) ) {
			top =  dayIndex * 15;
			if( offset > 0 ){ top += 15; }
			picTreeHTML += "<div id='event"+i+"' class='text date_caption' style='position:absolute; top:"+top+"; width:105px; height:14px; left:0px; font-size:9px;' ";
			picTreeHTML += "onclick='openPics("+year+","+month+","+day+");' ";
			picTreeHTML += "onmouseover='this.className = \"text item_selected\";' ";
			picTreeHTML += "onmouseout='this.className = \"text date_caption\"' ";
			picTreeHTML += ">";
			picTreeHTML += name;
			picTreeHTML += "</div>";
		}		
	}
	if( offset > 0 ){
		top = 0;
		picTreeHTML += "<div id='event"+i+"' class='text item_unselected' style='position:absolute; top:"+top+"; width:105px; height:14px; left:0px; font-size:9px;' ";
		picTreeHTML += "onclick='drawPicTree("+(offset-30)+");' ";
		picTreeHTML += "onmouseover='this.className = \"text item_selected\";' ";
		picTreeHTML += "onmouseout='this.className = \"text item_unselected\"' ";
		picTreeHTML += ">";
		picTreeHTML += "<img src='images/month_uparrow.png'> Next Month";
		picTreeHTML += "</div>";
	}
	top = 15 * maxDays;
	picTreeHTML += "<div id='event"+i+"' class='text item_unselected' style='position:absolute; top:"+top+"; width:105px; height:14px; left:0px; font-size:9px;' ";
	picTreeHTML += "onclick='drawPicTree("+(offset+30)+");' ";
	picTreeHTML += "onmouseover='this.className = \"text item_selected\";' ";
	picTreeHTML += "onmouseout='this.className = \"text item_unselected\"' ";
	picTreeHTML += ">";
	picTreeHTML += "<img src='images/month_downarrow.png'> Prev Month";
	picTreeHTML += "</div>";

	if( document.getElementById("picTree") ){
		document.getElementById("picTree").innerHTML = picTreeHTML;
	}
	
	
}

function selectTreeLine( lineObj, lineNumber ){
	lineObj.className = 'item_selected';
	lineObj.style.borderRight = '0px SOLID #FAFAFF';
	lineObj.style.width = "61px";
	document.getElementById('picViewer').style.top = lineObj.style.top; 
	var imageLocation = treeObject.pics[lineNumber].img;
	var NumPics = treeObject.pics[lineNumber].numPics;
	//alert( imageLocation );
	$imageHTML = "<div style='position:absolute; width:120px; height:90px; left:2px; top:2px; text-align:center; background:#000;'><img src='" + imageLocation + "'></div>";
	$imageHTML += "<div style='position:absolute; top:92px; left:2px;'><i>" + NumPics + " Pictures</i></div>";
	document.getElementById('picViewer').innerHTML = $imageHTML;
	document.getElementById("picViewer").style.visibility = 'visible';
}

function deselectTreeLine( lineObj, lineNumber ){
	lineObj.className = 'item_unselected';
	lineObj.style.width = "60px";
	document.getElementById("picViewer").style.visibility = 'hidden';
}