var currentImageID = 0;
var galleryOpen = false;
document.onkeydown = galleryKeyPressEvent;
window.onresize = windowResized;
var myWidth = 0, myHeight = 0;

function showGalleryImage(imageID)
{
	el('modal').style.display = 'block';	
	
	
	if (el('galleryThumb.' + currentImageID)) {
		el('galleryThumb.' + currentImageID).className = 'galleryThumbnail';
	}
	
	if (el('galleryImageContainer').offsetHeight > 0) {
	  el('galleryImage').style.paddingTop = ((el('galleryImageContainer').offsetHeight - 45)/2) + "px";
	}
	
	
	el('galleryImage').style.width = '249px';
	el('galleryImage').style.height = '91px';
	el('galleryImage').src = 'img/loading.png';
	//alert('please wait');
	//el('galleryImage').width = '249';
	//el('galleryImage').height = '91';
	
	
	galleryOpen = true;
	currentImageID = parseInt(imageID);
	el('galleryThumb.' + currentImageID).className = 'galleryThumbnailSelected';
	var image = galleryItems['image' + imageID];
	
  if (image) {
    var loader = new ImageLoader(galleryPath + image.filename);
    //set event handler
    loader.loadEvent = function(url, image) {
      //action to perform when the image is loaded
      //document.body.appendChild(image);
      afterLoad(image);
    }
    loader.load();
  } else {
    alert('image' + imageID);
  }
	
	return false;
}

function afterLoad(loadedImage) {
	var image = galleryItems['image' + currentImageID];
	
	el('galleryImage').style.paddingTop = "0px";
	el('galleryImage').style.width = '';
	el('galleryImage').style.height = '';
	el('galleryImage').src = loadedImage.src;
		
	//el('galleryImage').src = galleryPath + image.filename;
	el('modal').style.display = 'block';	
	
	el('galleryCaption').innerHTML = image.name;
	el('galleryImageContainer').style.width = (Math.max(parseInt(image.width), 800)) + "px";
	el('galleryImageContainer').style.height = (Math.max(parseInt(image.height), 600)) + "px";
	
	el('galleryPager').style.width = el('galleryImageContainer').offsetWidth + "px";
	el('galleryCaption').style.width = (el('galleryImageContainer').offsetWidth - 6) + "px";
	el('galleryFrame').style.width = (el('galleryImageContainer').offsetWidth + 20) + "px";
	
	updateGalleryPager();
	
	el('galleryFrame').style.height = (el('galleryImageContainer').offsetHeight + el('galleryCaption').offsetHeight + el('galleryPager').offsetHeight + 25) + "px";
	el('galleryFrame').style.marginLeft = "-" + (el('galleryFrame').offsetWidth / 2) + "px";
	el('galleryFrame').style.marginTop = "-" + (el('galleryFrame').offsetHeight / 2) + "px";
	
	fitGallery();	
		
}

function fitGallery() {
	if (galleryOpen) {
		getWindowSize();

		if (myHeight < el('galleryFrame').offsetHeight || myWidth < el('galleryFrame').offsetWidth) {
			var frameMargin = 10;
			
			var hasChanges = true;
			var maxWidth = myWidth - 20 - (frameMargin * 2);
			var iWidth = maxWidth;
			var image = galleryItems['image' + currentImageID];
			var maxAttempt = 5;
			
			while (hasChanges) {
				hasChanges = false; 
				
				//resize width because that will determine the height
				el('galleryPager').style.width = (iWidth + 2) + "px";
				el('galleryCaption').style.width = (iWidth - 4) + "px";
				
				//now we can get the height
				var maxHeight = myHeight - 25 - el('galleryCaption').offsetHeight - el('galleryPager').offsetHeight - (frameMargin * 2);
				if (maxHeight > 600) {
					maxHeight = 600;
				}
				
				imageAspect = parseInt(image.width)/parseInt(image.height);
				frameAspect = iWidth / maxHeight;

				if (frameAspect > imageAspect) { //the heights need to match, pad the width
					el('galleryImage').style.height = maxHeight + "px";
					el('galleryImage').style.width = maxHeight * imageAspect + "px";
				} else { //the widths need to match, pad the height
					el('galleryImage').style.width = iWidth + "px";
					el('galleryImage').style.height = iWidth / imageAspect + "px";
				}

				if (iWidth != el('galleryImage').offsetWidth) {
					iWidth = el('galleryImage').offsetWidth;
					hasChanges = true;
					maxAttempt = maxAttempt - 1;
					if (maxAttempt <= 0) {
						hasChanges = false; //just in case it goes on indefinetely
					}
				}
			}
			
			el('galleryImageContainer').style.width = el('galleryImage').offsetWidth + "px";
			el('galleryImageContainer').style.height = el('galleryImage').offsetHeight + "px";

			//el('galleryFrame').style.width = myWidth + "px";
			//el('galleryFrame').style.height = myHeight + "px";
			
			el('galleryFrame').style.width = (el('galleryImageContainer').offsetWidth + 20) + "px";
			el('galleryFrame').style.height = (el('galleryImageContainer').offsetHeight + el('galleryCaption').offsetHeight + el('galleryPager').offsetHeight + 25) + "px";
		
			el('galleryFrame').style.marginLeft = "-" + (el('galleryFrame').offsetWidth / 2) + "px";
			el('galleryFrame').style.marginTop = "-" + (el('galleryFrame').offsetHeight / 2) + "px";
		}
	}
}

function windowResized() {
  if (galleryOpen) {
		var image = galleryItems['image' + currentImageID];
	
		el('galleryImage').style.width = '';
		el('galleryImage').style.height = '';
		
		el('galleryImageContainer').style.width = (Math.max(parseInt(image.width), 800)) + "px";
		el('galleryImageContainer').style.height = (Math.max(parseInt(image.height), 600)) + "px";
		
		el('galleryPager').style.width = el('galleryImageContainer').offsetWidth + "px";
		el('galleryCaption').style.width = (el('galleryImageContainer').offsetWidth - 6) + "px";
		el('galleryFrame').style.width = (el('galleryImageContainer').offsetWidth + 20) + "px";
		
		updateGalleryPager();
		
		el('galleryFrame').style.height = (el('galleryImageContainer').offsetHeight + el('galleryCaption').offsetHeight + el('galleryPager').offsetHeight + 25) + "px";
		el('galleryFrame').style.marginLeft = "-" + (el('galleryFrame').offsetWidth / 2) + "px";
		el('galleryFrame').style.marginTop = "-" + (el('galleryFrame').offsetHeight / 2) + "px";
		
		fitGallery();
	}
}

function hideGallery() {
	el('modal').style.display = 'none';
	galleryOpen = false;
}

function galleryImageLoad() {
	//el('galleryFrame').style.height = (el('galleryImageContainer').offsetHeight + el('galleryCaption').offsetHeight + el('galleryPager').offsetHeight + 25) + "px";
}

function updateGalleryPager() {
  if (currentImageID <= 0) {
	  //the first one
		//el('galleryPrev').onClick = void(0);
		el('galleryPrev').className = 'disabled';
	} else {
	  //not the first one
		//el('galleryPrev').onClick = galleryGoPrev;
		el('galleryPrev').className = 'common';
	}
	
	if (currentImageID >= galleryItemCount) {
	  //the last one
		//el('galleryNext').onClick = void(0);
		el('galleryNext').className = 'disabled';
	} else {
	  //not the last one
		//el('galleryNext').onClick = galleryGoNext;
		el('galleryNext').className = 'common';
	}
}

function galleryGoNext() {
  if (currentImageID < galleryItemCount) {
		showGalleryImage(currentImageID + 1);
	}
}

function galleryGoPrev() {
  if (currentImageID > 0) {
		showGalleryImage(currentImageID - 1);
	}
}

function galleryKeyPressEvent(evt) {
	var e = evt || window.event;
	var handled = false;
	
	if (galleryOpen) {
		switch(e.keyCode) {
		  case 39: //right arrow
			case 34: //page down
				galleryGoNext();
				handled = true;
				break;
			case 37: //left arrow 
			case 33: //page up
			  galleryGoPrev();
				handled = true;
				break;
			case 27: //escape
			  hideGallery();
				handled = true;
				break;
			case 36: //home
			  showGalleryImage(0);
				handled = true;
				break;
			case 35: //end
				showGalleryImage(galleryItemCount);
				handled = true;
				break;
			case 32: //spacebar
			  galleryRandom();
			  break;
		}
	}
	
	return !handled;
}


function getWindowSize() {
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  //window.alert( 'Width = ' + myWidth );
  //window.alert( 'Height = ' + myHeight );
}

function galleryRandom() {
	var randomID = currentImageID;
	
	if (galleryItemCount > 0) {
		while (randomID == currentImageID) {
			randomID = Math.floor(Math.random() * (galleryItemCount+1));
		}
	} else {
		randomID = 0;
	}
	
	showGalleryImage(randomID);
}



/**
* A simple JavaScript image loaderimage loader
* @author Cuong Tham
* @url http://thecodecentral.com/2008/02/21/a-useful-javascript-image-loader
* @usage
* var loader = new ImageLoader('IMAGE_URL');
* //set event handler
* loader.loadEvent = function(url, image){
*   //action to perform when the image is loaded
*   document.body.appendChild(image);
* }
* loader.load();
*/

//source: http://snipplr.com/view.php?codeview&id=561
// Cross-browser implementation of element.addEventListener()
function addListener(element, type, expression, bubbling)
{
  bubbling = bubbling || false;
  if(window.addEventListener)	{ // Standard
    element.addEventListener(type, expression, bubbling);
    return true;
  } else if(window.attachEvent) { // IE
    element.attachEvent('on' + type, expression);
    return true;
  } else return false;
}

var ImageLoader = function(url){
  this.url = url;
  this.image = null;
  this.loadEvent = null;
};

ImageLoader.prototype = {
  load:function(){
    this.image = document.createElement('img');
    var url = this.url;
    var image = this.image;
    var loadEvent = this.loadEvent;
    addListener(this.image, 'load', function(e){
      if(loadEvent != null){
        loadEvent(url, image);
      }
    }, false);
    this.image.src = this.url;
  },
  getImage:function(){
    return this.image;
  }
};