/**
 * Alias for document.getElementById
 *
 * @param string e 
 */
function element (e){
	return document.getElementById(e);
}

/**
 * ImageSlider object
 */
var ImageSlider = function(){};

/**
* Holds all images that are visible in the imageslider
 * @var array images
 */
ImageSlider.prototype.images = new Array();

/**
 * Contains an HTML object that wil be used to render images in
 * @var HTMLElement imageHolder
 */
ImageSlider.prototype.imageHolder = false;
ImageSlider.prototype.imageHolderOffsetElement = false;
ImageSlider.prototype.setImageHolder = function (element){ this.imageHolder = element; }

/**
* Contains the dimensions for the thumbnails
* @var thumbnailDimensions array
*/
ImageSlider.prototype.imageDimensions = false;
ImageSlider.prototype.setImageDimensions = function (w, h){ this.imageDimensions = [w, h]; }

/**
 * Contains the current Image Index of the current image being shown
 * @var int currentImageIndex
 */
ImageSlider.prototype.currentImageIndex = 0;

/**
 * Contains an HTML object that wil be used to render thumbnails in
 * @var HTMLElement thumbnailHolder
 */
ImageSlider.prototype.thumbnailHolder = false;
ImageSlider.prototype.setThumbnailHolder = function (element){ this.thumbnailHolder = element; }

/**
* Contains the dimensions for the thumbnails
* @var thumbnailDimensions array
*/
ImageSlider.prototype.thumbnailDimensions = false;
ImageSlider.prototype.setThumbnailDimensions = function (w, h){ this.thumbnailDimensions = [w, h]; }

/**
 * Contains the full scale dialog
 * @var HTMLElement fullScaleDialog
 */
ImageSlider.prototype.fullScaleDialog = false;
ImageSlider.prototype.fullScaleDialogImage = false;

/**
* Contains the dimensions for the full-scale images
* @var thumbnailDimensions array
*/
ImageSlider.prototype.fullScaleImageDimensions = false;
ImageSlider.prototype.setFullScaleImageDimensions = function (w, h){ this.fullScaleImageDimensions = [w, h]; }


/**
 * setImage function
 * Adds an image to our image array
 *
 * @param string mediumURI The URI of the medium size image.
 * @param string thumbURI The URI of the  thumbnail-sized image.
 * @param string fullscaleURI The URI of the  full-sized image.
 */
ImageSlider.prototype.addImage = function (mediumURI, thumbURI, fullscaleURI){
	this.images.push([mediumURI, thumbURI, fullscaleURI]);
}

/**
 * Contains the controls used to navigate through the imageslider
 * @var array controls 
 */
ImageSlider.prototype.controls = false;
ImageSlider.prototype.setControls = function (l, r){ this.controls = [l, r]; }

/**
 * Renders the images to the image holder
 * @param HTMLElement element The element to render images in. The img elements will just be appended. Make sure the element in this.imageHolder is empty yourself.
 * @param array images The images that will get rendered to the image holder.
 */
ImageSlider.prototype.renderSlideImages = function (element, images) {
	for (var i = 0; i < images.length; i++){
		var image = document.createElement('img');
		image.imageIndex = i;
		image.src = images[i][0];
		image.style.width = this.imageDimensions[0] + 'px';
		image.style.height = this.imageDimensions[1] + 'px';
		image.style.cssFloat = 'left';
		element.appendChild(image);
		image.parent = this;
		image.onclick = function (){
			this.parent.fullScaleDialog.style.display = 'block';
		}
	}	
}

/**
 * Renders the thumbnails to the thumbnail holder
 * @param HTMLElement element The element to render thumbnails in. The img elements will just be appended. Make sure the element in this.thumbnailHolder is empty yourself.
 * @param array images The images that will get rendered to the thumbnail holder.
 */
ImageSlider.prototype.renderThumbnails = function (element, images) {
	for (var i = 0; i < images.length; i++){
		var image = document.createElement('img');
		image.id = 'thumbnail' + i;
		image.src = images[i][1];
		image.style.width = this.thumbnailDimensions[0] + 'px';
		image.style.height = this.thumbnailDimensions[1] + 'px';
		image.imageIndex = i;
		// Scoping workaround again
		image.parent = this;
		
		// When the user clicks on the thumbnail, we want to scroll to the image
		// That's what this does.
		image.onclick = function(){
			this.parent.currentImageIndex = this.imageIndex;
			this.parent.scrollToImage(this.imageIndex);
		}
		
		element.appendChild(image);
	}
}

/**
 * Event for controls click
 * @param string control
 */
ImageSlider.prototype.onControlClick = function (control){
	// LEFT CONTROL
	if (control == 0){
		// We obviously can't go below 0, because there's no images there
		if (this.currentImageIndex == 0){
			return;
		}
		
		this.currentImageIndex--;
		this.scrollToImage(this.currentImageIndex);
	}
	
	// RIGHT CONTROL
	if (control == 1){
		// Image index can't be higher than total amount of images
		// If that's the case, were screwed up.
		// TODO: Call scrollToImage(this.currentImageIndex)????
		if (this.currentImageIndex == (this.images.length - 1)){
			return;
		}
		
		this.currentImageIndex++;
		this.scrollToImage(this.currentImageIndex);
	}
}

/**
 * Scrolls the Image Slider to a certain image
 * @param int imageIndex
 */
ImageSlider.prototype.scrollToImage = function (imageIndex){
	this.imageHolderOffsetElement.style.marginLeft = -(imageIndex * this.imageDimensions[0]) + 'px';
	this.fullScaleDialogImage.src = this.images[imageIndex][2];
	// Give all thumbnail img elements "inactive" class, and "active" to the current image's thumbnail
	for(var i = 0; i < this.images.length; i++){
		element('thumbnail' + i).className = 'IS_inactiveThumbnail';
	}
	element('thumbnail' + imageIndex).className = 'IS_activeThumbnail';
}

/**
 * Starts the execution of ImageSlider
 */
ImageSlider.prototype.initialize = function (){
	// Create an offset element that we'll use to fake a scrolling effect
	var offsetElement = document.createElement('div');
	this.imageHolderOffsetElement = offsetElement;
	this.imageHolderOffsetElement.style.height = this.imageDimensions[1];
	this.imageHolderOffsetElement.style.width = this.imageDimensions[0] * this.images.length;
	
	this.imageHolder.appendChild(offsetElement);
	this.imageHolder.style.width = this.imageDimensions[0] + 'px';
	this.imageHolder.style.height = this.imageDimensions[1] + 'px';
	this.imageHolder.style.overflow = 'hidden';
	// Render the images to the image holder
	this.renderSlideImages(this.imageHolderOffsetElement, this.images);
	
	// Render the thumbnails to the thumbnail holder
	this.renderThumbnails(this.thumbnailHolder, this.images);
	
	// Scroll to the first image in the slider.
	// This is mostly the current image already, but lets just make sure.
	this.scrollToImage(0);
	
	// Fix some weird scoping in JS
	// If we're in a onclick callback, the scope is the element that was clicked on, rather than ImageSlider
	this.controls[0].parent = this;
	this.controls[1].parent = this;
	
	// Hook onclick event for left control
	this.controls[0].onclick = function(){
		this.parent.onControlClick(0);
	}
	
	// Hook onclick event for left control
	this.controls[1].onclick = function(){
		this.parent.onControlClick(1);
	}
	
	this.fullScaleDialog = document.createElement('div');
	var closeDiv = document.createElement('div');
	closeDiv.id = 'closeDiv';
	closeDiv.appendChild(document.createTextNode('Sluiten X'));
	
	closeDiv.parent = this;
	closeDiv.onclick = function (){
		this.parent.fullScaleDialog.style.display = 'none';
	}
	
	this.fullScaleDialog.appendChild(closeDiv);
	this.fullScaleDialog.id = 'fullScaleDialog';
	var dialogImage = document.createElement('img');
	dialogImage.src = this.images[0][2];
	dialogImage.style.width = this.fullScaleImageDimensions[0] + 'px';
	dialogImage.style.height = this.fullScaleImageDimensions[1] + 'px';
	this.fullScaleDialogImage = dialogImage;
	this.fullScaleDialog.appendChild(dialogImage);
	
	var dialogButton = document.createElement('div');
	dialogButton.appendChild(document.createTextNode(this.dialogButtonCaption));
	dialogButton.className = this.dialogButtonClass;
	dialogButton.id = 'dialogButton';
	dialogButton.onclick = this.dialogButtonOnClick;
	this.fullScaleDialog.appendChild(dialogButton);
	this.imageHolder.parentNode.insertBefore(this.fullScaleDialog, this.imageHolder);
}