$(document).ready(function() {
	var self = this,
		machineContainer = $('#machine_container'),
		machineImage = $('#machine-image'),
		imagesWindowContainer = $('#images-window-container'),
		imagesWindow = $('#images-window'),
		imagePrev = $('#image-prev'),
		imageNext = $('#image-next'),
		imageBack = $('#image-back'),
		curW,
		curH;
	
	this.showImagesWindow = function(curIndex, images) {		
		curW = machineContainer.width();
		curH = machineContainer.height();
		
		imagesWindowContainer.height(Math.max(440,curH)).show();
		machineContainer.hide();
		
		self.showImage(curIndex, images);
		
		if (images.length > 1) {
			imagePrev.fadeIn();
			imageNext.fadeIn();
		}
		imageBack.fadeIn();
	};
	
	this.showImage = function(curIndex, images) {
		var html,
			node;
		
		html = '<img src="/image/' + images[curIndex]['id'] + '/medium"></img>"';
		node = $(html);
		node.hide();
		imagesWindow.empty().append(node);
		node.fadeIn();
		node.click(function() {
			self.hideImagesWindowContainer();
		})
		.hover(function() {
			$(this).css('cursor', 'pointer');
		}, function() {
			$(this).css('cursor', 'hand');
		});
		
		if (images[curIndex]['caption'] != '') {
			html = '<div class="caption">' + images[curIndex]['caption'] + '</div>';
			imagesWindow.append(html);	
		}
		
		if (images.length > 1) {
			imagePrev.hover(function() {
				$(this).css('cursor', 'pointer').attr('src', '/pub/image/left-hover.png');
			}, function() {
				$(this).css('cursor', 'hand').attr('src', '/pub/image/left.png');
			})
			.unbind('click')
			.click(function () {
				if (curIndex == 0) {
					self.showImage(images.length - 1, images);
				}
				else {
					self.showImage(curIndex - 1, images);
				}
			});
			imageNext.hover(function() {
				$(this).css('cursor', 'pointer').attr('src', '/pub/image/right-hover.png');
			}, function() {
				$(this).css('cursor', 'hand').attr('src', '/pub/image/right.png');
			})
			.unbind('click')
			.click(function (){
				if (curIndex + 1 == images.length) {
					self.showImage(0, images);
				}
				else {
					self.showImage(curIndex + 1, images);
				}
			});
		}
	};
	
	this.hideImagesWindowContainer = function() {
		imagesWindowContainer.hide();
		imagePrev.hide();
		imageNext.hide();
		machineContainer.fadeIn();
	};
	
	$.ajax({
		url:'/machines/fetch-images/',
		data:{id:machineId},
		type:'POST',
		dataType:'json',
		success:function(data) {
			var defaultImageId = data['default_image_id'],
				defaultImageIndex,
				images = data['images'],
				node,
				html;

			if (defaultImageId) {
				html = '<img src="/image/' + defaultImageId + '/preview"></img>';
				machineImage.append(node = $(html));
				node.hover(function() {
					$(this).css('cursor', 'pointer');
				}, function() {
					$(this).css('cursor', 'hand');
				});
				
				for (var i = 0; i < images.length; ++i) {
					// Find default image index
					if (images[i]['id'] == defaultImageId) {
						defaultImageIndex = i;
						break;
					}
				}
				
				node.click(function() {
					self.showImagesWindow(defaultImageIndex, images);
					return false;
				});
				
				
			}
			else {
				html = '<div class="no-image">No image available</div>';
				machineImage.append(node = $(html));
				return;
			}
			
			imageBack.click(function() {
				self.hideImagesWindowContainer();
			})
			.hover(function() {
				$(this).css('cursor', 'pointer').attr('src', '/pub/image/back-hover.png');;
			}, function() {
				$(this).css('cursor', 'hand').attr('src', '/pub/image/back.png');
			});
			
			if (images.length > 0) {
				if (images.length == 1) {
					html = '<div><a href="#">Click to enlarge image</a></div>';
				}
				else {
					html = '<div><a href="#">Click to view ' + images.length + ' images</a></div>';
				}
				
				machineImage.append(node = $(html));
				node.click(function() {
					self.showImagesWindow(defaultImageIndex, images);
					return false;
				});
			}	
		}
	});
});