var mainWin;
var mainText;
var extraWidth;

function getScrollBarWidth () {
	var inner = document.createElement('p');
	inner.style.width = "100%";
	inner.style.height = "150px";
	
	var outer = document.createElement('div');
	outer.style.position = "absolute";
	outer.style.top = "0px";
	outer.style.left = "0px";
	outer.style.visibility = "hidden";
	outer.style.width = "200px";
	outer.style.height = "150px";
	outer.style.overflow = "hidden";
	outer.appendChild (inner);
	
	document.body.appendChild (outer);
	var w1 = inner.offsetWidth;
	outer.style.overflow = 'scroll';
	var w2 = inner.offsetWidth;
	if (w1 == w2) w2 = outer.clientWidth;
	
	document.body.removeChild (outer);
	
	return (w1 - w2);
}

function setup() {
	mainWin = document.createElement('div');
}

function draw() {
	mainWin.style.padding = '0px';
	mainWin.style.position = "absolute";
	mainWin.style.left = '0px';
	mainWin.style.top = '0px';
	mainWin.style.height = (360) + 'px';
	mainWin.style.width = (800+extraWidth) + 'px';
	//mainWin.innerHTML = '<div style="position:absolute; top:0; left:0; height:' + (300-getScrollBarWidth()) + '; width:' + (800+extraWidth) + ';"></div>';
	document.body.appendChild( mainWin );
}

function setText( string ) {
	mainText = document.createElement('div');
	mainText.innerHTML = '<div onMouseOver="clearAllButtons()" style="position:absolute; top:10; left:10; height:' + (280-getScrollBarWidth()) + '; width:384; z-index:99" class="main_text">' + string + '</div>';
//	mainWin.style.zIndex = 10;
	mainWin.appendChild( mainText );
}


var current_x = -120;

function setImageSegment( image, width ) {

	var newImage = document.createElement('div');

	newImage.style.position = "absolute";
	newImage.style.top = "0px";
	newImage.style.left = current_x + "px"; 
	//newImage.className = "main_text";
	current_x += width;

	var oImg=document.createElement("img");
	oImg.setAttribute('src', 'images/' + image );
	//oImg.setAttribute('alt', 'alternate text');
	//oImg.setAttribute('height', '50px');
	//oImg.setAttribute('width', '100px');
	//var sometext = document.createTextNode("what a way to spend a life");
	newImage.appendChild(oImg);
	newImage.style.zIndex = 1;
	mainWin.appendChild( newImage );

}



function setVideoSegment( video ) {

	var newVideo = document.createElement('div');

	newVideo.style.position = "absolute";
	newVideo.style.top = "0px";
	newVideo.style.left = current_x + "px"; 
	current_x += 480;

    var width = 480;
    var height = 360;

	var object=document.createElement("div");
	object.innerHTML= '<object type="application/x-shockwave-flash" data="images/' + video + '" width="480" height="360"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="480" height="360"><param name="' + video + '" value="images/' + video + '" /><param name="loop" value="true" /><param name="menu" value="false" /><p>Problems retrieving images!</p></object>';
	newVideo.appendChild(object);
	mainWin.appendChild( newVideo );

}















function Button( iid, iimage, ititle, idescription, ilink, itargetX, itargetY ) {
	this.id = iid;
	this.image = iimage;
	this.title = ititle;
	this.description = idescription;
	this.link = ilink;
	this.targetX = itargetX;
	this.targetY = itargetY;
	this.on = false;
}

var buttonArray_ = new Array();
var buttonDivsArray_ = new Array();

function addButton( image, title, description, link, targetX, targetY ) {
	buttonArray_.push( new Button( buttonArray_.length, image, title, description, link, targetX, targetY ) );
	extraWidth = Math.floor((buttonArray_.length-1) / 2) * 400;
	var row = ((buttonArray_.length-1) % 2) * 134;
	
	var button = document.createElement('div');
	button.style.position = "absolute";
	button.style.top = (12 + row) + "px";
	button.style.left = (411 + extraWidth) + "px";
	button.innerHTML = '<div onClick="buttonClick(' + (buttonArray_.length-1) + ')" onMouseOver="buttonOver(' + (buttonArray_.length-1) + ')" style="position:absolute; top:0; left:0; height:122; width:378; background-color: #111111;"><div style="position:absolute; top:11; left:11;"><img src="' + image + '"></div><div style="position:absolute; top:8; left:120;" class="button_title">' + title + '</div><div style="position:absolute; top:35; left:120;" class="button_description">' + description + '</div></div>';
	buttonDivsArray_.push( button );
	
	mainWin.appendChild( button );
}

function buttonOver( id ) {
	clearAllButtons();
	buttonDivsArray_[id].innerHTML = '<div onClick="buttonClick(' + id + ')" onMouseOut="buttonOut(' + id + ')" style="position:absolute; top:0; left:0; height:122; width:378; background-color: #eeeeee;"><div onMouseOut="buttonOut(' + id + ')" style="position:absolute; top:11; left:11;"><img src="' + buttonArray_[id].image + '"></div><div style="position:absolute; top:8; left:120;" class="click">Click to view entry</div></div>';
	buttonArray_[id].on = true;
}

function buttonOut( id ) {
	buttonDivsArray_[id].innerHTML = '<div onClick="buttonClick(' + id + ')" onMouseOver="buttonOver(' + id + ')" style="position:absolute; top:0; left:0; height:122; width:378; background-color: #111111;"><div style="position:absolute; top:11; left:11;"><img src="' + buttonArray_[id].image + '"></div><div style="position:absolute; top:8; left:120;" class="button_title">' + buttonArray_[id].title + '</div><div style="position:absolute; top:35; left:120;" class="button_description">' + buttonArray_[id].description + '</div></div>';
	buttonArray_[id].on = false;
}

function buttonClick( id ) {
	window.open( buttonArray_[id].link, 'imagesWindow', 'left=100,top=100,width=' + buttonArray_[id].targetX + ',height=' + buttonArray_[id].targetY + ',toolbar=no,location=yes,directories=no,status=no,menubar=no,copyhistory=no,resizable=yes' );
}

function clearAllButtons() {
	for( var i=0; i<buttonArray_.length; i++)
	{
		if( buttonArray_[i].on )
		{
			buttonOut( i );
		}
	}
}