function image(id, img, name, desc)
{
	this.id = id;
	this.image = img;
	this.name = name;
	this.description = desc;
}

function scroller(spacing)
{
	_this = this;
	this.images = new Array();
	this.numImages = 0;
	this.loadCount = 0;
	this.length = 0;
	this.addImage = addImage;
	this.displayImage = displayImage;
	this.spacing = spacing;
	this.panel = document.createElement('div');
	this.panel.style.cssText = "position:relative;"
	this.scrollpanel = document.createElement('div');
	this.scrollpanel.style.cssText = "position: relative; overflow: hidden; width: 100%;";

	this.parent = document.getElementById("scroller");
	this.parent.style.overflow = "hidden";
	this.scrollpanel.appendChild(this.panel);
	var loadimg = document.createElement('img');
	loadimg.setAttribute('src','images/loading.gif');
	loadimg.style.paddingLeft = "200px";
	this.panel.appendChild(loadimg);
	this.parent.appendChild(this.scrollpanel);
	
	this.leftnav = document.createElement('img');
	this.leftnav.setAttribute('src','images/leftnav.png');
	this.leftnav.style.cssText = "width: 32px; height: 64px; position: absolute; top: 50px; left: 10px;";
	this.leftnav.onclick = function() {_this.scrollpanel.scrollLeft -= 100;};

	this.leftnav.onmouseover = function()
	{
		_this.leftnav.style.cursor = "pointer";
		_this.leftnav.src = "images/leftnavover.png";
	};

	this.leftnav.onmouseout = function()
	{
		_this.leftnav.src = "images/leftnav.png";
	};

	this.rightnav = document.createElement('img');
	this.rightnav.setAttribute('src','images/rightnav.png');
	this.rightnav.style.cssText = "width: 32px; height: 64px; position: absolute; top: 50px; right: 10px;";
	this.rightnav.onclick = function() {_this.scrollpanel.scrollLeft += 100;};

	this.rightnav.onmouseover = function()
	{
		_this.rightnav.style.cursor = "pointer";
		_this.rightnav.src = "images/rightnavover.png";
	};

	this.rightnav.onmouseout = function()
	{
		_this.rightnav.src = "images/rightnav.png";
	};

	this.leftshadow = document.createElement('img');
	this.leftshadow.setAttribute('src','images/scroll_left_shadow.png');
	this.leftshadow.style.cssText = "position: absolute; width: 15px; height: 125px;";

	this.rightshadow = document.createElement('img');
	this.rightshadow.setAttribute('src','images/scroll_right_shadow.png');
	this.rightshadow.style.cssText = "position: absolute; right: 48px; width: 15px; height: 125px;";
}

function displayImage(img)
{
	var divTag = document.createElement('div');
	divTag.style.cssFloat = "left";
	divTag.style.styleFloat = "left";
	divTag.style.width = "100px";
	//divTag.style.display = "inline";
	divTag.style.position = "relative";
	divTag.style.paddingLeft = (this.spacing / 2) +"px";
	divTag.style.paddingRight = (this.spacing / 2) +"px";
	var imgTag = document.createElement('img');
	imgTag.style.position = "relative";
	imgTag.setAttribute('src',img.image);
	
	imgTag.oncontextmenu = function() {return false;};
	imgTag.onclick = function()
	{
		document.getElementById("leaderbox").innerHTML="<div style=\"padding-left:200px; padding-top:15px;\"><img src=\"images/loading.gif\" alt=\"Loading...\"></div>";
		if (window.XMLHttpRequest)
  		{
  			xmlhttp=new XMLHttpRequest();
  		}
		else
  		{
  			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
		xmlhttp.onreadystatechange=function()
  		{
  			if (xmlhttp.readyState==4 && xmlhttp.status==200)
    			{
    				document.getElementById("leaderbox").innerHTML=xmlhttp.responseText;
    			}
  		}
		xmlhttp.open("GET","getLeader.php?id="+img.id,true);
		xmlhttp.send();
	}

	imgTag.onmouseover = function(e)
	{
		imgTag.style.cursor = "pointer";
		var desc = document.createElement('div');
		desc.setAttribute('id','desc');
		desc.style.cssText = "position: absolute; border-style: solid; border-width: 1px; border-color: #ffffff; padding-top: 10px; padding-bottom: 10px; width: 200px; left: 0px; top: 0px; font-family: verdana, arial; font-size: 8pt; color: #ffffff; background-color: #000000;";
		//desc.style.zIndex = "1000";
		var text = document.createElement('p');
		text.style.cssText = "text-align: center; color: #ffffff; font-weight: bold; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px;";
		text.innerHTML = img.name;
		var off = document.createElement('p');
		off.style.cssText = "text-align: center; color: #ffffff; font-weight: normal; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px;";
		off.innerHTML = img.description;
		desc.appendChild(text);
		desc.appendChild(off);
		var parent = document.getElementsByTagName('body')[0];

        		if (window.event)
				e=window.event;
			var target = e.target ? e.target : e.srcElement;

			var x = getOffset(target).left - 40;
			var y = getOffset(target).top - 50;
			desc.style.left = x + "px";
			desc.style.top = y + "px";
		parent.appendChild(desc);
	};

	imgTag.onmouseout = function()
	{
		var desc = document.getElementById('desc');

		while (desc.hasChildNodes())
		{
			desc.removeChild(desc.firstChild);
		}
		desc.parentNode.removeChild(desc);
	};

	imgTag.style.position = "relative";
	imgTag.style.boder = "0px";
	divTag.appendChild(imgTag);
	_this.panel.appendChild(divTag);
}

function addImage(id, img, name, desc)
{
	this.numImages++;
	var im = new image(id, img, name, desc);
	var loader = new Image();
	loader.src = img;
	loader.onload = function()
	{
		_this.length += loader.width + _this.spacing; _this.panel.style.width = _this.length + "px";
		_this.loadCount++;
		if (_this.loadCount == _this.numImages)
		{
			while (_this.panel.hasChildNodes())
			{
				_this.panel.removeChild(_this.panel.firstChild);
			}
			
			for (i = 0; i < _this.numImages; i++)
			{
				_this.displayImage(_this.images[i]);
			}
			_this.leftnav.style.top = ((_this.parent.scrollHeight / 2) - 32) +"px";
			_this.rightnav.style.top = ((_this.parent.scrollHeight / 2) - 32) +"px";
			_this.parent.appendChild(_this.leftnav);
			_this.parent.appendChild(_this.rightnav);

			_this.leftshadow.style.top = ((_this.parent.scrollHeight / 2) - 62) +"px";
			_this.parent.appendChild(_this.leftshadow);
			_this.rightshadow.style.top = ((_this.parent.scrollHeight / 2) - 62) +"px";
			_this.parent.appendChild(_this.rightshadow);
		}
	}
	this.images[this.images.length] = im;
}

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}