/* IE doesn't want to observe the dom:loaded event for some reason */
//document.observe("dom:loaded", function() {
	
	$$('#skyline li').each(function(v){
		v.observe('mouseover',function(){
			var leftmargin = 225;
			var rightmargin = 660;
			var headline = $('headline');
			var previousSelection = $$('#skyline li.selected');

			Element.extend(this);
			if(previousSelection.first() != undefined)
			{
				previousSelection.first().removeClassName('selected');
			}
			this.addClassName('selected');

			if(this.firstChild.firstChild.alt != headline.innerHTML)
			{
			 	this.makePositioned();
				var xy = this.positionedOffset(this);
				var offset = xy[0];
				var thumbwidth = this.getWidth();

				headline.style.opacity = 0;
				headline.style.left = '0px';
				headline.innerHTML = this.firstChild.firstChild.alt;
				var width = headline.getWidth();

				var totaloffset = leftmargin + offset - (width/2) + (thumbwidth/2);
				var rightmost = totaloffset + width;
				var finaloffset = leftmargin;
				if(totaloffset < leftmargin)
				{
					finaloffset = leftmargin; //too left
				}
				else if(rightmost > rightmargin)
				{
					finaloffset = rightmargin - width; //too right
				}
				else
				{
					finaloffset = totaloffset; //normal
				}

				headline.style.left = finaloffset + 'px';
				headline.style.opacity = 100;
			}
		});
		v.observe('mouseout',function(){
			// un-comment this if you want to remove highlite on mouseout
			//this.removeClassName('selected');
			//$('headline').innerHTML = '';
		});
	});
//});