Function.prototype.bind = function(context){
	var that = this;
	return function(){
		return that.apply(context, arguments);
	};
};


var ImageViewer = function(){
	
	// ---------- Private members ---------- //
	// Container for image urls
	var 
		// Data
		imageUrls = [],
		// Layout Elements
		baseElement = document.createElement("div"),
		viewerElement = document.createElement("div"),
		// Image elements
		imageElements = [] // Generate later
		// Settings
		// TODO
		
		currentImage = 0
	;
	
	// ----------------------------- Initialisation ----------------------------- //
	var init = function(){
		if(arguments.length > 0) {
			for(var i = 0; i < arguments.length; i++){
				var arg = arguments[i];
				if(typeof arg === "string"){
					imageUrls.push(arg)
				} else {
					console.log("ARGUMENT WAS OBJECT");
					initArgObject(arguments[i]);		
				}
			}
		}
	
		// Setup styles
		baseElement.id = "Image-Viewer";
		viewerElement.id = "Image-Viewer-Outer";
	};
	
	
	//  ------------------------------ Private methods ------------------------------ //
	// initArgObject - initialise an object passed in args.
	var initArgObject = function(obj){
		var im;
		// Argument: images
		if(obj.images && obj.images.length && obj.images.length > 0){
			im = obj.images;
			for(var i = 0; i < im.length; i++){
				if(typeof im[i] === "string"){
					imageUrls.push(im[i]);
				}
			} 
		}
		// Argument: settings
		if(obj){
			initSettings(obj);
		}
	}.bind(this);
	
	// initSettings - initialise any settings passed in args.
	var initSettings = function(settings){
		// TODO
		console.log("PARSE SETTINGS: " + settings);
	}.bind(this);
	
	// generateImages - creates list of image elements from current image URLs.
	var generateImages = function(){
		var img, i;
		imageElements = [];
		// Check we have some images
		if(imageUrls.length > 0){
			for(i = 0; i < imageUrls.length; i++) {
				// Create and store image elements.
				img = document.createElement("img");
				img.src = imageUrls[i];
				img.classList.add("Image");
				imageElements.push(img);
				// Hide later elements.
				if(i > 0) { img.style.display = "none"; img.style.opacity = 0; }
			}
		}
	}.bind(this);
	
	var eventSetup = function(){
		var leftBlock  = document.createElement("div"),
			rightBlock = document.createElement("div"),
			leftIcon   = document.createElement("img"),
			rightIcon  = document.createElement("img")
		;
		
		leftBlock.className = "Left-Block Box Align";
		rightBlock.className = "Right-Block Box Align Pack-Right";
		leftIcon.classList.add("Icon");
		rightIcon.classList.add("Icon");
		
		leftIcon.src = "icons2/arrow_left.png";
		rightIcon.src = "icons2/arrow_right.png";
		
		leftBlock.appendChild(leftIcon);
		rightBlock.appendChild(rightIcon);
		
		leftBlock.addEventListener('mouseover', function(){
			console.log("MOUSEOVER LEFT");
			leftIcon.style.opacity = 1;
		});
		rightBlock.addEventListener('mouseover', function(){
			rightIcon.style.opacity = 1;
		});
		leftBlock.addEventListener('mouseout', function(){
			leftIcon.style.opacity = 0;
		});
		rightBlock.addEventListener('mouseout', function(){
			rightIcon.style.opacity = 0;
		});
		
		leftBlock.addEventListener('mouseup', function(){
			var newIndex = currentImage === 0 ? imageElements.length - 1 : currentImage - 1;
			imageElements[currentImage].style.display = "none";
			imageElements[newIndex].style.display = "block";
			currentImage = newIndex;
		});
		rightBlock.addEventListener('mouseup', function(){
			var newIndex = currentImage === imageElements.length - 1 ? 0 : currentImage + 1;
			imageElements[currentImage].style.opacity = 0;
			setTimeout(function(){
				imageElements[currentImage].style.display = "none";
				imageElements[newIndex].style.display = "inline";
				imageElements[newIndex].style.opacity = 0;
				imageElements[newIndex].style.opacity = 1;
				currentImage = newIndex;
				
			}, 500);
		});
		
		baseElement.appendChild(leftBlock);
		baseElement.appendChild(rightBlock);
		
	};
	
	// ------------------------------ Public methods ------------------------------ //
	this.renderInto = function(el){
		var im;
		// Clear elements
		while(el.hasChildNodes()) { el.removeChild(el.firstChild); }
		// Create image elements
		generateImages();
		for(var i = 0; i < imageElements.length; i++){
			im = imageElements[i];
			viewerElement.appendChild(im);
		}
		
		baseElement.appendChild(viewerElement);
		
		eventSetup();
		
		el.appendChild(baseElement);
	}


	init.apply(this, arguments);
};