// JavaScript Document written by Brian Gates
/*
This file is required for portfolio.class.php
//Example:  (rather than initiating js directly, it is better to use portfolio.class.php.  see that file for further instructions.)


		Point_of_Purchase = new Portfolio('Point_of_Purchase');
			Point_of_Purchase.Box1 = Point_of_Purchase.createBox('Point_of_Purchase.Box1');
			Point_of_Purchase.Box1.bubble.img = 'images/unknown.gif';
			Point_of_Purchase.Box1.bubble.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu dolor. Vivamus tristique, velit vitae adipiscing lobortis, purus eros commodo ante, vitae bibendum eros diam vitae ligula. Nullam aliquam bibendum eros. Suspendisse ornare risus. Curabitur et nulla. Aliquam quis velit.';
			Point_of_Purchase.Box2 = Point_of_Purchase.createBox('Point_of_Purchase.Box2');
			Point_of_Purchase.Box2.bubble.img = 'images/unknown.gif';
			Point_of_Purchase.Box2.bubble.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu dolor. Vivamus tristique, velit vitae adipiscing lobortis, purus eros commodo ante, vitae bibendum eros diam vitae ligula. Nullam aliquam bibendum eros. Suspendisse ornare risus. Curabitur et nulla. Aliquam quis velit.';
			Point_of_Purchase.Box3 = Point_of_Purchase.createBox('Point_of_Purchase.Box3');
			Point_of_Purchase.Box3.bubble.img = 'images/unknown.gif';
			Point_of_Purchase.Box3.bubble.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu dolor. Vivamus tristique, velit vitae adipiscing lobortis, purus eros commodo ante, vitae bibendum eros diam vitae ligula. Nullam aliquam bibendum eros. Suspendisse ornare risus. Curabitur et nulla. Aliquam quis velit.';
			Point_of_Purchase.Box4 = Point_of_Purchase.createBox('Point_of_Purchase.Box4');
			Point_of_Purchase.Box4.bubble.img = 'images/unknown.gif';
			Point_of_Purchase.Box4.bubble.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu dolor. Vivamus tristique, velit vitae adipiscing lobortis, purus eros commodo ante, vitae bibendum eros diam vitae ligula. Nullam aliquam bibendum eros. Suspendisse ornare risus. Curabitur et nulla. Aliquam quis velit.';
			Point_of_Purchase.Box5 = Point_of_Purchase.createBox('Point_of_Purchase.Box5');
			Point_of_Purchase.Box5.bubble.img = 'images/unknown.gif';
			Point_of_Purchase.Box5.bubble.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu dolor. Vivamus tristique, velit vitae adipiscing lobortis, purus eros commodo ante, vitae bibendum eros diam vitae ligula. Nullam aliquam bibendum eros. Suspendisse ornare risus. Curabitur et nulla. Aliquam quis velit.';
			
		Point_of_Purchase.view();

*/


function Portfolio(id) { // This constructor must receive a string of the variable name to which the object is being assigned, ie foo = new Box('foo') or bar = new Box('bar')
	//properties
	this.id = id;
	this.boxes = new Array();
	this.timeout = null;
	this.boxesDiv = null;
	this.rootDirectory = "";
	//methods
	this.set_rootDirectory = Portfolio_Set_RootDirectory;
	this.createBox = Portfolio_CreateBox; 	//makes and returns a new box, also pushing a copy into the boxes array
	this.view = Portfolio_View;				//writes the html div, whose object is saved to "this.boxesDiv"
	//event handlers
	this.rollover = Portfolio_Rollover;
	this.hide = Portfolio_Hide;
	this.rollout = Portfolio_Rollout;
	
	function Portfolio_Set_RootDirectory(rootDirectory){
		this.rootDirectory = rootDirectory;
		for(i in this.boxes)
			this.boxes[i].set_rootDirectory(rootDirectory);
	}
	
	function Portfolio_CreateBox(id) {
		box = new Box(id);
		box.set_rootDirectory(this.rootDirectory);
		newlength = this.boxes.push(box);
		return this.boxes[newlength-1];
	}
	
	function Portfolio_View() {
		with(this){
			name = id.replace(/_/g, " ");
			width = 27*boxes.length;
			document.write('<div class="portfolio" style="width:'+width+'px;" onmouseover="'+id+'.rollover()" onmouseout="'+id+'.rollout()">');
				document.write('<span class="title">'+name+'</span>');
				document.write('<div class="boxes_over" style="width:'+width+'px;" id="'+id+'">');
					for(i in boxes)
						boxes[i].view();
				document.write('</div>');
			document.write('</div>');
			boxesDiv = document.getElementById(id);
		}
	}
	
	function Portfolio_Rollover() {
		//if(document.visiblePortfolio) document.visiblePortfolio.hide();
		//this.boxesDiv.className = "boxes_over";
		//document.visiblePortfolio = this;
	}
	
	function Portfolio_Rollout() {
		//this.timeout = setTimeout('document.visiblePortfolio.hide();', 500);
	}
	
	function Portfolio_Hide() {
		//if(this.timeout) clearTimeout(this.timeout);
		//this.boxesDiv.className = "boxes";
	}

}
	
	
function Box(id) { // This constructor must receive a string of the variable name to which the object is being assigned, ie foo = new Portfolio('foo') or bar = new Portfolio('bar')
	//properties
	this.id=id;
	this.div = null;
	this.timeout = null;
	this.rolloutDelay = 500;
	this.rootDirectory;
	this.bubble = new Bubble(id+'_Bubble');		//constructs the box's bubble.
	//methods
	this.view = Box_View;						//writes the html div, whose object is saved to "this.div"
	this.set_rootDirectory = Box_Set_RootDirectory;
	this.set_name = Box_Set_Name;
	//event handlers
	this.onclick = Box_Onclick;
	this.rollout = Box_Rollout;
	this.rollout2 = Box_Rollout2;
	this.rollover = Box_Rollover;
	
	function Box_Set_RootDirectory(rootDirectory) {
		this.rootDirectory = rootDirectory;
		this.bubble.set_rootDirectory(rootDirectory);
	}
	
	function Box_Set_Name(name) {
		this.name = name;
		this.bubble.set_name(name);
	}

	function Box_View() {
		with (this) {
			document.write('<div class="box" id="'+id+'_div" onmouseout="'+id+'.rollout()" onmouseover="'+id+'.rollover()" onclick="'+id+'.onclick()">');
			bubble.view();
			document.write('<div class="X">X</div></div>');
			div = document.getElementById(id+'_div');
		}
	}
	
	function Box_Onclick() {
		//this.bubble.show();
		this.bubble.Link.click();
		//portfolioViewer = window.open(this.bubble.viewer+'?id='+this.id, 'previewer');
		
	}
	
	function Box_Rollover(){
		clearTimeout(this.timeout);
		//if there's another box visible, hide it:
		if(document.visibleBox != null && document.visibleBox != this)
			document.visibleBox.rollout2();
		this.div.className = "box_over";
		document.visibleBox = this;
		this.bubble.rollover();
	}

	function Box_Rollout() {
		this.timeout = setTimeout('document.visibleBox.rollout2();', this.rolloutDelay);
		this.bubble.rollout();
	}
	
	function Box_Rollout2() {
		with(this){
			clearTimeout(timeout);
			div.className = "box";
		}
	}
}

function Link(id) {
	this.id = id;
	this.viewer = 'portfolioViewer.php?id=';
	this.isPopup = true;
	
	this.click = function() {
		href = this.viewer+this.id;
		if(this.isPopup) window.open(href, 'linkclicked', 'width=1000, scrollbars=yes, resizable=1');
		else window.location = href;
	}
}
	
	
	
function Bubble(id) { // This constructor must receive a string of the variable name to which the object is being assigned, ie foo = new Bubble('foo') or bar = new Bubble('bar')
	//properties
	this.id = id;
	this.name = '';
	this.portfolioId = id.replace('_Bubble', '');
	this.img = '';
	this.thumb = '';
	this.previewText = '';
	this.fullText = '';
	this.blurb = '';
	this.div = null;
	this.rootDirectory;
	this.rolloutDelay = 500;
	this.rolloverDelay = 500;
	this.viewer = 'portfolioViewer.php';
	this.Link = new Link(this.portfolioId);
		//this.previewTextLength = 330;
	//methods
	this.view = Bubble_View;
	this.show = Bubble_Show;
	this.hide = Bubble_Hide;
	this.set_text = Bubble_Set_Text;
	this.set_blurb = Bubble_Set_Blurb;
	this.set_image = Bubble_Set_Image;
	this.set_rootDirectory = Bubble_Set_RootDirectory;
	this.set_name = Bubble_Set_Name;
	//event handlers
	this.rollover = Bubble_Rollover;
	this.rollout = Bubble_Rollout;
	
	function Bubble_Set_RootDirectory(rootDirectory) {
		this.rootDirectory = rootDirectory;
	}
	
	function Bubble_Set_Name(name) {
		this.name = name;
	}
	
	/*function Bubble_View() {
		with (this) {
			document.write('<div class="bubble" id="'+id+'""><div class="bubble_img" style="background-image:url(\''+rootDirectory+thumb+'\');"><a href="'+viewer+'?id='+portfolioId+'"><img src="'+rootDirectory+'images/imgframe.gif" width="114" height="125"/></a></div><div class="bubble_copy"><h1>'+name+'</h1><br>'+blurb+'</div></div>');
			div = document.getElementById(id);
		}
	}*/

	function Bubble_View() {
		with (this) {
			document.write('<div class="bubble" id="'+id+'""><div class="bubble_img" style="background-image:url(\''+rootDirectory+thumb+'\');"><img src="'+rootDirectory+'images/imgframe.gif" width="114" height="125"/></div><div class="bubble_copy"><h1>'+name+'</h1><br>'+blurb+'</div></div>');
			div = document.getElementById(id);
		}
	}

	function Bubble_Show() {
		clearTimeout(this.timeout);
		this.div.className = 'bubble_over';
		document.bubbleToShow = null;
		document.visibleBubble = this;
	}
	
	function Bubble_Rollover() {
		clearTimeout(this.timeout);
		if(document.visibleBubble && document.visibleBubble != this) {
			document.visibleBubble.hide();
			this.show();
		} 
		else if(!document.visibleBubble){
			this.timeout = setTimeout("if(document.bubbleToShow) document.bubbleToShow.show();", this.rolloverDelay);
			document.bubbleToShow = this;
		}
	}
	
	function Bubble_Rollout() {
		clearTimeout(this.timeout);
		this.timeout = setTimeout("if(document.visibleBubble) document.visibleBubble.hide();", this.rolloutDelay);
	}
	
	function Bubble_Hide() {
		if(document.visibleBubble == this) document.visibleBubble = null;
		if(document.bubbleToShow == this) document.bubbleToShow = null;
		clearTimeout(this.timeout);
		this.div.className = 'bubble';
	}
	
	function Bubble_Set_Blurb(text) {
		this.blurb = text;
	}
	
	function Bubble_Set_Text(text) {
		with(this) {
			fullText = text;
			previewText = text;
			/*if(text.length > previewTextLength) {
				paragraphs = previewText.split('</p>');
				returns = previewText.split('<br>');
				previewTextLength = previewTextLength-paragraphs.length*35;
				previewText = (text.substr(0, previewTextLength)+'...</p><a href="'+viewer+'?id='+portfolioId+'">(continued)</a>');
			}*/
		}
	}
	
	function Bubble_Set_Image(img) {
		this.img = img;
		this.thumb = img.replace(".", "_thumb.");
	}
}