function ImagePreloader(images,callback) {
   // store the call-back
   this.callback = callback;
 
   // initialize internal state.
   this.nLoaded = 0;
   this.nProcessed = 0;
   this.aImages = new Array;
 
   // record the number of images.
   this.nImages = images.length;
 
   // for each image, call preload()
   for ( var i = 0; i < images.length; i++ )
      this.preload(images[i]);
}

ImagePreloader.prototype.preload = function(image) {
   // create new Image object and add to array
   var oImage = new Image;
   this.aImages.push(oImage);
  
   // set up event handlers for the Image object
   oImage.onload = ImagePreloader.prototype.onload;
   oImage.onerror = ImagePreloader.prototype.onerror;
   oImage.onabort = ImagePreloader.prototype.onabort;
  
   // assign pointer back to this.
   oImage.oImagePreloader = this;
   oImage.bLoaded = false;
  
   // assign the .src property of the Image object
   oImage.src = image;
}

ImagePreloader.prototype.onComplete = function() {
   this.nProcessed++;
   if ( this.nProcessed == this.nImages )
   {
      this.callback();
   }
}

ImagePreloader.prototype.onload = function() {
   this.bLoaded = true;
   this.oImagePreloader.nLoaded++;
   this.oImagePreloader.onComplete();
}

ImagePreloader.prototype.onerror = function() {
   this.bError = true;
   this.oImagePreloader.onComplete();
}

ImagePreloader.prototype.onabort = function() {
   this.bAbort = true;
   this.oImagePreloader.onComplete();
}

var width_area = 491;//294;
var height_area = 149;//155;

function Block() {
	this.width;
	this.height;
	this.x;
	this.y;
}

function freeSpace() {
	var blocks = new Array;
	
	this.add_block = add_block;
	
	construct();
	
	function construct() {
		var temp = new Block();
		temp.width = 67;
		temp.height = 30;
		temp.x = 0;
		temp.y = 0;
		
		add_block(temp);  // "Home link"
		
		temp = new Block();
		temp.width = 212;
		temp.height = 100;
		temp.x = 279;
		temp.y = 0;
		
		add_block(temp); // Flag
	}
	
	function add_block(new_block) {		
		var kount = 0;
		
		while (blocks_overlap(new_block) || boundary_overlap(new_block)) {
			new_block.x = Math.round(Math.random()*width_area);
			new_block.y = Math.round(Math.random()*height_area);
			kount++;

			if (kount%10 == 0) {
				height_area += 50;
				var temp = objId('shoutout');
				temp.style.width = width_area + 'px';
				temp.style.height = height_area + 'px';
				// set display height as well
			}
		}
		blocks[blocks.length] = new_block;
		return new_block;
		
	}
	
	function boundary_overlap(b) {
		if (b.x + b.width > width_area) {
			return true;
		}
		if (b.y + b.height > height_area) {
			return true;
		}
		return false;
	}
	
	function blocks_overlap(b) {
		for (var j=0;j<blocks.length;j++) {
			if (block_overlap(b,blocks[j])) {
				return true;
			}
		}
		return false;
	}
	
	function block_overlap(b1,b2) {
		//alert(b1.width + " " + b1.height + ", " + b2.width + " " + b2.height);
		if (horizontal_overlap(b1,b2) && vertical_overlap(b1,b2)) {
			//alert('block_overlap: true');
			return true;
		}
		//alert('block_overlap: false');
		return false;
	}
	
	function horizontal_overlap(b1,b2) { // left block, right block
		if (b1.x > b2.x) {
			return horizontal_overlap(b2,b1);
		}
		else {
			if (b1.x <= b2.x && b2.x <= b1.x+b1.width) {
				return true;
			}
			else {
				return false;
			}
		}
	}
	
	function vertical_overlap(b1,b2) { // left block, right block
		if (b1.y > b2.y) {
			return vertical_overlap(b2,b1);
		}
		else {
			if (b1.y <= b2.y && b2.y <= b1.y+b1.height) {
				return true;
			}
			else {
				return false;
			}
		}
	}
}

var shoutout_zindex = 2;

function shoutout_fill() {
	var shoutouts = objId('shoutouts');
	var anchors = getElementsByClassName("shoutout_link",shoutouts);
	var divs = getElementsByClassName("shoutout_msg",shoutouts);
	var freespace = new freeSpace();
	
	shoutouts.style.display = "block";
	for (var i=0;i<divs.length;i++) {
		var anchor = anchors[i];
		anchor.style.position = "absolute";
		
		var div = divs[i];
		div.style.position = "absolute";
		
		var new_block = new Block();
		//alert(anchor.firstChild.complete);
		new_block.width = parseInt(anchor.firstChild.width);
		new_block.height = parseInt(anchor.firstChild.height);
		new_block.x = Math.round(Math.random()*width_area);
		new_block.y = Math.round(Math.random()*height_area);
		
		freespace.add_block(new_block);
		
		anchor.style.top = new_block.y+"px";
		anchor.style.left = new_block.x+"px";
		
		div.style.top = new_block.y+"px";
		div.style.left = new_block.x+"px";
		div.style.display = "none";
	}
}

function shoutout_image_load() {
/* setup the ImagePreloader class to preload all shout images
    *note: This is important as javascript needs the images loaded before it can discern its dimension
*/
	var ul = objId('shoutouts');
	var anchors = ul.getElementsByTagName('a');

	var image_array = new Array;

	for (var i=0;i<anchors.length;i++) {
		var anchor = anchors[i];
		image_array.push(anchor.firstChild.src);
	}

	var preloader = new ImagePreloader(image_array,shoutout_fill);
}

function showShoutout(id) {
	div = objId('shoutout_msg'+id);
	div.style.display = "block";
	div.style.zIndex = shoutout_zindex++;
	
	a = objId('shoutout_link'+id);
	a.style.display = "none";
	//a.style.height = "auto";
}

function hideShoutout(id) {
	div = objId('shoutout_msg'+id);
	div.style.display = "none";
	
	a = objId('shoutout_link'+id);
	a.style.display = "block";
	//a.style.height = "10px";
}

/* Delete Shoutout ****************************************/
var del_xmlHttp;
function deleteShoutout(index,id) {
	del_xmlHttp = GetXmlHttpObject();
	var url = urld+"?id="+id;

	del_xmlHttp.open("GET",url,true);
	del_xmlHttp.onreadystatechange = deletedShoutout;
	del_xmlHttp.send(null);
	

	var temp = objId('shoutout_link'+index);
	temp.parentNode.removeChild(temp);
	
	temp = objId('shoutout_msg'+index);
	temp.parentNode.removeChild(temp);
}

function deletedShoutout() {
	if (del_xmlHttp.readyState == 4) {
		//alert(del_xmlHttp.responseText);
	}
}

/* Edit Profile Blurb ****************************************/
function InfoUpdateClass() {
	this.holder;
	this.textarea;

	this.construct();	
	return (this);
}

InfoUpdateClass.prototype.construct = function() {
	this.holder = document.createElement('div');
	this.holder.id = 'profile_update_holder';
	this.holder.className = "clear";
		
	this.textarea = document.createElement('textarea');
	this.holder.appendChild(this.textarea);
	
	var button_row = document.createElement('div');
	button_row.className = "controls";
	button_row.innerHTML = "<a href=\"#\" class=\"button3\" onclick=\"updateinfo(); return false;\">"+update_txt+"</a>";
	button_row.innerHTML +="<a href=\"#\" class=\"button3\" onclick=\"toggleText(false); return false;\">"+cancel_txt+"</a>";
	this.holder.appendChild(button_row);
}

var update_area = new InfoUpdateClass();
var update_xmlHttp;

function toggleText(show) {
	var parent = objId('profile_text');
	var info_text = objId('info_text');
	if (show) {
		info_text.style.display = 'none';
		
		update_area.textarea.innerHTML = profile_update_text;
		parent.appendChild(update_area.holder);
	}
	else {
		info_text.style.display = 'block';
		parent.removeChild(update_area.holder);
	}
}

function updateinfo() {
	/* send info to server */	
	var poststr = "fyiBlurb="+update_area.textarea.value;

	update_xmlHttp = GetXmlHttpObject();
	var url = urlu; // global

	update_xmlHttp.open("POST",url,true);
	update_xmlHttp.onreadystatechange = updatedInfo;
	update_xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	update_xmlHttp.setRequestHeader("Content-length", poststr.length);
	update_xmlHttp.setRequestHeader("Connection", "close");
	update_xmlHttp.send(poststr);

	profile_update_text = update_area.textarea.value;
	
	update_area.textarea.disabled = true;
}

function updatedInfo() {
	if (update_xmlHttp.readyState == 4) {
		update_area.textarea.disabled = false;
		
		var xmlDoc = update_xmlHttp.responseXML;
		var info_text = objId('info_text');
		info_text.innerHTML = xmlDoc.getElementsByTagName('blurb')[0].childNodes[0].nodeValue;
		toggleText(false); // make the Blurb text non-editable	
	}
}
/*********************************************************/
addDOMLoadEvent(function () {
	var temp = objId('shoutout');
	temp.style.width = width_area + 'px';
	temp.style.height = height_area + 'px';
	shoutout_image_load();
})