function ImageBrowser(imageObjects, showImageDescription){
	var self = this;
	self.imageObjects = imageObjects;
	self.showImageDescription = showImageDescription;
	self.isInitialized = false;
}

ImageBrowser.prototype = {
	gridSize : 20,
	init : function(){
		var self = this;
		
		self.imageIndex = 0;
		self.imageCnt = self.imageObjects.length;
		self.gridIndex = 0; // calculated on enterThumbGridMode ?
		self.gridCnt = Math.ceil(self.imageCnt/self.gridSize);			
	
		self.thumbGridMode = $('<div class="subviewMode" id="thumbGridMode"/>')
			.append($('<div class="middleBox"/>')
				.append($('<div class="thumbBox"/>'))
			)
			.append($('<div class="rightBox"/>')
				.append($('<div class="imageNavigationBox"/>')
					.append($('<div class="navLeft"/>'))
					.append($('<div class="navText"/>'))
					.append($('<div class="navRight"/>'))
				)
			)
				
		self.bigImageMode = $('<div class="subviewMode" id="bigImageMode"/>')	
			.append($('<div class="middleBox"/>')
				.append($('<div class="bigImageProxy"/>'))
			)
			.append($('<div class="rightBox"/>')
				.append($('<div class="imageNavigationBox"/>')
					.append($('<div class="navLeft"/>'))
					.append($('<div class="navText"/>'))
					.append($('<div class="navRight"/>'))
				)
				.append($('<div class="pieceInfoBox"/>'))
			)		
	
		$('.navLeft', self.bigImageMode).click(function(){
			self.imageIndex = (self.imageCnt + self.imageIndex - 1) % self.imageCnt;
			self.enterBigImageMode(self.imageObjects[self.imageIndex], self.imageIndex);
		});
		$('.navRight', self.bigImageMode).click(function(){
			self.imageIndex = (self.imageIndex + 1) % self.imageCnt;
			self.enterBigImageMode(self.imageObjects[self.imageIndex], self.imageIndex);
		});
		
		
		$('.navLeft', self.thumbGridMode).click(function(){
			self.gridIndex = (self.gridCnt + self.gridIndex - 1) % self.gridCnt;
			self.populateThumbGrid();
		});
		$('.navRight', self.thumbGridMode).click(function(){
			self.gridIndex = (self.gridIndex + 1) % self.gridCnt;
			self.populateThumbGrid();
		});
		
		self.populateThumbGrid();
		self.bigImageMode.hide();
		self.thumbGridMode.show();
		
		self.isInitialized = true;
	},
	attachTo: function(element){
		var self = this;
		element.empty();
		element.append(self.thumbGridMode);
		element.append(self.bigImageMode);
		
	},
	populateThumbGrid : function(){
		var self = this;
		var startIndex = self.gridIndex * self.gridSize;
		var endIndex = Math.min(startIndex + self.gridSize, self.imageCnt) -1;
		var thumbBox = $(".thumbBox", self.thumbGridMode);
		thumbBox.empty();
		for (var index=startIndex; index <= endIndex; index++){
			//alert(index);
			var imageObj = self.imageObjects[index];
			//if (!imageObj) alert(index);
			var imgPath = imageObj.thumbUrl;
			
			$('<div/>').css('background-image', 'url("'+imgPath+'")').data('obj', imageObj).data('imgNum', index).appendTo(thumbBox).click(function(){
				var imageIndex = $(this).data('imgNum');
				var imageObj = $(this).data('obj');
				
				self.imageIndex = imageIndex
				self.enterBigImageMode(imageObj, imageIndex);
				
				//location.href = location.href + '#' + imageIndex;
				//window.status = '#' + imageIndex;
			})
			
			;

			/*
			var img = new Image();
			$(img)
			.css('visibility', 'hidden')
			.load(function(){
				$(this).css('visibility', 'visible');
			})
			.error(function(){
				//alert('error');
			})
			.attr('src', imgPath);
			
			$('<div/>').addClass('imageHolder').data('obj', imageObj).data('imgNum', index).click(function(){
				var imageIndex = $(this).data('imgNum');
				var imageObj = $(this).data('obj');
				self.imageIndex = imageIndex
				self.enterBigImageMode(imageObj, imageIndex);
			})
			//.append($('<img/>').attr('src', imgPath))
			.append(img)
			.appendTo(thumbBox);
			*/
		}
		if (isIe6) {
			$('div', thumbBox).hover(
				//function(){$(this).addClass('hover').css('border-color', '#ff7700');},
				//function(){$(this).removeClass('hover').css('border-color', '');}
				function(){$(this).addClass('hover');},
				function(){$(this).removeClass('hover');}				
			);			
		}
	
		if (self.gridCnt > 1){
			$(".imageNavigationBox", self.thumbGridMode).show();
			$(".navText", self.thumbGridMode).text((self.gridIndex+1)+ ' of ' + self.gridCnt);
		}
		else {
			$(".imageNavigationBox", self.thumbGridMode).hide();
		}
	},
	enterThumbGridMode : function(){
		var self = this;
		
		var newGridIndex = Math.floor(self.imageIndex / self.gridSize);
		if (newGridIndex != self.gridIndex){
			self.gridIndex = newGridIndex;
			self.populateThumbGrid()
		}

		self.bigImageMode.hide();
		self.thumbGridMode.show()
	},
	enterBigImageMode: function(imageObj, imageIndex){
		var self = this;

		self.thumbGridMode.hide()
		self.bigImageMode.show();
		
		
		var middleBox = $(".middleBox", self.bigImageMode);
		middleBox.empty();
		middleBox.append($('<div/>').css({height: '100px', float: 'left'})); // make middleBox have some height
		
		middleBox.addClass('loading');
		
		
		var imageUrl = '/uploads/images/' + imageObj.fileName.replace(/{.*?}/, '');
				
		var img = new Image();
		$(img)
		.load(function(){
			middleBox.empty();
			middleBox.removeClass('loading');
			middleBox.append($(this));
	    })
		.error(function(){
			alert('error');
		})
		.addClass('bigImage')
		.click(function(){
			self.enterThumbGridMode();
		})
		.attr('src', imageUrl);
		
		$(".navText", self.bigImageMode).text((self.imageIndex+1)+' of '+self.imageCnt);

		if (self.showImageDescription){
			$(".pieceInfoBox", self.bigImageMode).html(imageObj.description.replace(/\n/g, '<br/>'));
		}
		else
			$(".pieceInfoBox", self.bigImageMode).empty();
	}	
}