var photoIdx = 0;
var photoTray = null;
var photos = null;
var photoImages = new Array();
var docWidth = 0;
var photoCount = 0;
var prevPhotoIdx = 0;
var photosLoaded = 0;
var trayHeight = 510;
var countedWidth = 0;
var centerWidth = 0;
var trayMargin = 0;

var PHOTO_MARGIN = 10
var TRAY_PADDING = 400
var FADED_OPACITY = 0.20
var CAPTION_HEIGHT = 10;


function Photo(src, purchaseurl) {
	this.width = 0;
	this.center = 0;
	this.elem = null
	this.container = null;
	this.src = src;
	this.purchaseurl = purchaseurl;
	this.loaded = false;
	
	this.load = function(newIdx) {
		this.container = document.createElement("div");
		this.container.setAttribute('class', 'photo');
		this.container.style.display = 'block';
		if ( newIdx == 0 )
			this.container.xOpacity = 0.99;
		else
			this.container.xOpacity = FADED_OPACITY;
		setOpacity(this.container);	
		this.elem = document.createElement("img");		
		this.elem.onload = function() { photoLoaded(newIdx) };
		this.elem.setAttribute('src', this.src);
		this.elem.setAttribute('id', 'photo'+ newIdx);
		this.elem.onclick = function(e) {
			var posx = 0;
			if ( !e )
				var e = window.event;
			if ( e.pageX )
			{
				posx = e.pageX;	
			}
			else if ( e.clientX )
			{
				posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			}
			
			var x = parseInt(posx - (( docWidth - photos[photoIdx].width) / 2));
	
			if ( x > ( photos[photoIdx].width / 2) )
				moveNext();
			else
				movePrevious();
		}		
		this.container.appendChild(this.elem);
		var photosDiv = document.getElementById('photos');
		photosDiv.appendChild(this.container);
	};
}


function quitLoading()
{
	var loading = document.getElementById('loading');
	loading.style.display = 'none';
		
	
}




function photoLoaded(idx)
{
	photosLoaded++;
	photoCount++;
	photos[idx].loaded = true;
	var w, h;
	if ( photos[idx].elem.naturalWidth )
	{
		w = photos[idx].elem.naturalWidth;
		h = photos[idx].elem.naturalHeight;
	}
	else
	{
		w = photos[idx].elem.width;
		h = photos[idx].elem.height;
	}
	photos[idx].width = w;
	photos[idx].center = centerWidth;
	photoImages.push(photos[idx].elem);
	
	countedWidth += w + PHOTO_MARGIN;
	centerWidth += w + PHOTO_MARGIN;
	
	if ( h > trayHeight )
		trayHeight = h + CAPTION_HEIGHT;
		
	photoTray.css('height', trayHeight + 'px');
	photoTray.css('width', countedWidth + TRAY_PADDING + 'px');
		
	if ( idx > photoIdx )
	{
		photos[idx].container.xOpacity = FADED_OPACITY;
		setOpacity(photos[idx].container);
	}

	trayMargin = parseInt((docWidth - photos[photoIdx].elem.width) / 2);
	photoTray.css('margin-left', trayMargin + 'px');
	resizeDoc();	
	loadAhead();
}

function setOpacity(img)
{
	if ( img.xOpacity > 0.99 ) 
	{
		img.xOpacity = 0.99;
	}
	else
	{
		img.style['-ms-filter'] = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (img.xOpacity * 100) + ")";
		img.style['filter'] = "alpha(opacity=" + (img.xOpacity * 100) + ")";
		img.style['-moz-opacity'] = img.xOpacity;
		img.style['opacity'] = img.xOpacity;
	}
}
	

function init()
{
	photos = Array();
	$j = jQuery.noConflict();
	
	jQuery('#photolist p').each(function(index, obj) {
		photos.push(new Photo($j(obj).html()));
	});
	

	// get the document's width
	docWidth = $j(document).width;
	// select photos in #photos via jquery
	photoTray = $j($j('#photos'));
	//photoTray.css('visibility','hidden');
	loadPhotos();
		
	window.onresize = function()
	{
		resizeDoc();
	};
	
	
}

function loadPhotos()
{
	var firstIdx = 0;
	photos[firstIdx].load(0);
}




function loadAhead()
{
	newIdx = photosLoaded;
	if ( ( newIdx < photos.length ) && ( photos[newIdx].loaded != true ) )
	{
		photos[newIdx].load(newIdx);
	}

}


function resizeDoc()
{
	docWidth = jQuery(document).width();
	var newMarginLeft = parseInt( (docWidth - photos[photoIdx].width) / 2 )-( photos[photoIdx].center);
	photoTray.css('margin-left', newMarginLeft + 'px');	
	photoTray.css('height', trayHeight + 'px');
}



function movePrevious()
{
	if ( photoIdx > 0 )
	{
		photoIdx--;
		movePhoto()
	}
}

function moveNext()
{
	if ( photoIdx == ( photoCount - 1) )
	{

		photoIdx = 0;
	}
	else
	{
		photoIdx++;
	}
	movePhoto();
}

function movePhoto()
{
	if ( prevPhotoIdx != photoIdx )
	{
		photos[prevPhotoIdx].container.xOpacity = FADED_OPACITY;
		setOpacity(photos[prevPhotoIdx].container);
	}

	var newMarginLeft = parseInt((( docWidth - photos[photoIdx].width ) / 2) - photos[photoIdx].center);
	var currentIdx = photoIdx;

	photoTray.animate( { marginLeft: newMarginLeft }, TRAY_PADDING, 'easeInOutQuad', function()
	{
		photoTray.css('margin-left', newMarginLeft + 'px');
		photos[currentIdx].container.xOpacity = 0.99;
		setOpacity(photos[currentIdx].container);
	});

	prevPhotoIdx = photoIdx;
}