// I'm warning you right now, I have the tendency to over engineer...

// well, not a tendency... more like a compulsion

var currentWindow = new pnhWindowObject();
var layout = null;

function pnhXmasBoxObject(iBoxNum,sPhotoURI,sBoxColor) {
	this.boxID = "box"+iBoxNum;
	this.iconID = "icon"+iBoxNum;
	this.photoURI = sPhotoURI;
	this.clearBoxURI = "box.gif";
	this.coloredBoxURI = "box"+sBoxColor+".gif";
	
	// show()
	this.show = function() { document.getElementById(this.boxID).style.visibility="visible"; }
	
	// hide()
	this.hide = function() { document.getElementById(this.boxID).style.visibility="hidden"; }
	
	// turnOn()
	this.turnOn = function() { document.getElementById(this.iconID).src=this.coloredBoxURI; }
	
	// turnOff()
	this.turnOff = function() { document.getElementById(this.iconID).src=this.clearBoxURI; }
		
	// getPhotoURI()
	this.getPhotoURI = function() { return this.photoURI }
	
	// getBoxHeight()
	this.getBoxHeight = function() { return parseInt(document.getElementById(this.iconID).height); }
		
	// getBoxWidth()
	this.getBoxWidth = function() { return parseInt(document.getElementById(this.iconID).width); }
	
	// moveTo()
	this.moveTo = function(iLeft,iTop) { document.getElementById(this.boxID).style.left=iLeft+"px"; document.getElementById(this.boxID).style.top=iTop+"px"; }
	
}

function pnhXmasLayoutObject() {
	this.boxes = new Array(8);
	this.activeItem = null;
	this.photoID = "photoImg";
	this.photoDivID = "photo";
	this.titleID = "title";
	
	this.boxes[0] = new pnhXmasBoxObject(0,"DSCN2935.jpg","red");
	this.boxes[1] = new pnhXmasBoxObject(1,"DSCN3033.jpg","green");
	this.boxes[2] = new pnhXmasBoxObject(2,"DSCN2965.jpg","red");
	this.boxes[3] = new pnhXmasBoxObject(3,"DSCN2984.jpg","green");
	this.boxes[4] = new pnhXmasBoxObject(4,"DSCN3019.jpg","red");
	this.boxes[5] = new pnhXmasBoxObject(5,"DSCN2949.jpg","green");
	this.boxes[6] = new pnhXmasBoxObject(6,"DSCN3015.jpg","red");
	this.boxes[7] = new pnhXmasBoxObject(7,"DSCN3029.jpg","green");
	
	

	// setup()
	this.setup = function() {
		var winW = currentWindow.getInnerWidth() - 0; // loose the scrollbars
		var winH = currentWindow.getInnerHeight() - 16;
		var boxW = this.boxes[0].getBoxWidth(); // they are all the same
		var boxH = this.boxes[0].getBoxHeight();
	
		// rule 0: hide the content and show the title
		for (i=0;i<this.boxes.length;i++) {
			this.boxes[i].hide();
		}
		document.getElementById(this.photoID).style.visibility = "hidden";
		document.getElementById(this.titleID).style.visibility = "visible";

		
		// rule 1: center the boxes horizontally with 'word wrap'
		// rule 2: set the boxes off of the bottom of the screen
		var boxesPerRow = Math.floor(winW/boxW);
		var numRows = Math.ceil(this.boxes.length/boxesPerRow);
		var navTop = winH-(boxH*numRows);
		
		var boxesUsed= 0;
		// alert("boxW: " + boxW);
		// alert("boxesPerRow: " + boxesPerRow);
		// alert("numRows: " + numRows);

		for (x=0;x<numRows;x++) {
			// check the number of boxes in this row
			var boxesLeft = this.boxes.length - boxesUsed;
			var boxesThisRow = (boxesLeft <= boxesPerRow) ? boxesLeft : boxesPerRow;
			
			// split the width into equal parts then drop each box into the middle of that section
			
			for (y=0;y<boxesThisRow;y++) {
				var cellW = winW/boxesThisRow;
				var imgOffset = (cellW-boxW)/2;
				var newL = (y*cellW)+imgOffset;
				var newT = navTop+(x*boxH);
				// alert("box["+ boxesUsed+"]: (" + newL+","+newT+")");
				this.boxes[boxesUsed].moveTo(newL,newT);
				boxesUsed++;
			} 
			
		}
		
		// rule 3: center the landscape image in the area remaining above the boxes
		var roomW = winW - 20; // 10px space on all sides of the image
		var roomH = navTop - 40;
		var imageAspect = 512/384; // lazy... the images are all a standard size this time around
		var roomAspect = roomW/roomH;	
		if (roomAspect < imageAspect) {	// width is restrictive
			var newW = roomW;
			var newH = newW * 384/512;
		} else { // height is restrictive 
			var newH = roomH;
			var newW = newH * 512/384;
		}
		//alert(roomW+","+roomH);		
		//alert(newW+","+newH);
		
		document.getElementById(this.photoDivID).style.left = ((winW-newW)/2) +"px";
		document.getElementById(this.photoDivID).style.top = ((navTop-newH)/2) + "px";
		document.getElementById(this.photoID).width = newW;
		document.getElementById(this.photoID).height = newH;
		
		
		// rule 4: hide the title and show the content
		document.getElementById(this.titleID).style.visibility = "hidden";
		for (i=0;i<this.boxes.length;i++) {
			this.boxes[i].show();
		}
		document.getElementById(this.photoID).style.visibility = "visible";
	}

	
	
	// handleMouseOver()
	this.handleMouseOver = function(iBox) {
		this.boxes[iBox].turnOn();
	}
	
	// handleMouseOut()
	this.handleMouseOut = function(iBox) {
		// make the box plain if its not active
		if (iBox != this.activeItem) {
			this.boxes[iBox].turnOff();
		}
	}	
	
	// handleMouseClick()
	this.handleMouseClick = function(iBox) {
		// if there's an active item turn it off
		if (this.activeItem != null) {
			this.boxes[this.activeItem].turnOff();
			this.activeItem=null;
		}
		
		// setup the new photo
		this.activeItem = iBox;
		this.boxes[iBox].turnOn();
		document.getElementById(this.photoID).src=this.boxes[iBox].getPhotoURI();
		this.activeItem = iBox;
	}
		
}


function handleResize() {
	if (layout != null) {
		layout.setup();
	}
}

function init() {
	layout = new pnhXmasLayoutObject();
	layout.setup();
}