var mainCategoryDiv;
var categoryDiv;
var thumbnailDiv;
var pictureDiv;
var pictureTextDiv;
var categoryDescriptionDiv;

var currentCategory;
var currentThumbnails = [];
var currentThumbnailSlide;
var currentImageId;

var baseFadeTime = 200;

var clearCategories = function() {
	categoryDiv.empty();
	categoryDescriptionDiv.fadeOut(baseFadeTime);
}

var clearPicture = function(id, preload) {
	pictureDiv.fadeOut(baseFadeTime-90, function() { pictureDiv.text(""); if(id != undefined) {  loadImage2(id, preload); } });
	pictureTextDiv.fadeOut(baseFadeTime - 100, function() { pictureTextDiv.empty();  });
}

var highlightCategory = function(categoryId) {
	categoryDiv.children("div").removeClass("selected");
	$("#" + categoryId).addClass("selected");
}

var highlightMainCategory = function(rootId) {
	mainCategoryDiv.children("h1").addClass("notselected");
	$("#root" + rootId).removeClass("notselected");
}

var clearThumbs = function() {
	thumbnailDiv.fadeOut(200, function() { thumbnailDiv.empty(); });
	//thumbnailDiv.empty();
}

var createImageLabel = function(title, dimension) {
	var pictureTitleEl = $.create('h1', {'id': 'title', 'class': 'mini', 'style': 'text-transform: none; margin-bottom: 5px;'}, title);
	var pictureDimensionEl = $.create('div', {'id': 'dimensions', 'style': 'font-size: 11px'}, dimension);
	pictureTitleEl.appendTo(pictureTextDiv);
	pictureDimensionEl.appendTo(pictureTextDiv);
}

var loadImageCallback = function(data) {
	if(!data) {
		return;
	}
	var src = data['src'];
	
	var imgEl = $.create('img', {'src': src }, []);
	imgEl.click(function() {
		parent.openImage("image", data['id']);
		pageTracker._trackPageview("/portfolio/viewimage/" + data['id']);
	});
	//pictureDiv.hide();
	imgEl.appendTo(pictureDiv);
	pictureDiv.fadeIn(baseFadeTime);
	
	// picture text
	
	var title = data['name'];
	var dimensions = data['dimensions'];
	
	//pictureTextDiv.empty();
	createImageLabel(title, dimensions);
	pictureTextDiv.fadeIn(baseFadeTime);
}



var getViewableWidth = function() {
	return $("#rightContent").width() - 100;
}

var getViewableHeight = function() {
	return $("#container").height() - 200;
}

var loadCategoryImage = function(id) {
	pictureTextDiv.empty();
	currentImageId = id;
	
	var width = getViewableWidth();
	var height = getViewableHeight() - 300;
	var get = "image/getimagewithsize/" + id + "/" + width + "/" + height;
	
	$.getJSON(get,
       function(data){
		loadImageCallback(data);
       });
	
	
}

var loadImageFirst = function(id) {
	currentImageId = id;
	
	var width = getViewableWidth();
	var height = getViewableHeight();
	
	// get characters in cat description div, divide by 100, remove that many * 12 pixels from height
	var descriptionChars = categoryDescriptionDiv.text().length;
	var heightAdjustment = 0;
	
	if(descriptionChars > 0) {
		heightAdjustment = 1 + Math.floor(descriptionChars / 100) * 14;
	}
	
	height -= heightAdjustment;
	
	pictureDiv.css('padding-top', '15px');
	
	var get = "image/getimagewithsize/" + id + "/" + width + "/" + height;
	
	$.getJSON(get,
       function(data){
		loadImageCallback(data);
       });
	
}

var loadImage = function(id, preload) {
	if(preload != true) {
		categoryDescriptionDiv.fadeOut(baseFadeTime + 10);
		clearPicture(id, preload);
		currentImageId = id;
	}
	else {
		loadImage2(id, preload);
	}
}

var loadImage2 = function(id, preload) {
	var width = getViewableWidth();
	var height = getViewableHeight();
	
	pictureDiv.css('padding-top','0px');
	
	var get = "image/getimagewithsize/" + id + "/" + width + "/" + height;
	if(preload == true) {
		$.getJSON(get,
        function(data){
			loadPreloadCallback(data);
        });
	}
	else {
		$.getJSON(get,
        function(data){
			loadImageCallback(data);
        });
	}
}



var loadThumbnailSlide = function(slide) {

	thumbnailDiv.fadeOut(200, function() {
		clearThumbs();
		loadThumbnailSlideCallback(slide);
	});
}
	
var loadThumbnailSlideCallback = function(slide) {

	var i;
	for(i = slide * 4; i < (slide + 1) * 4 && i < currentThumbnails.length; i++) {
		var thumbnail = currentThumbnails[i];
		//thumbnail.fadeOut(1);
		thumbnail.click( function() { loadImage($(this).attr('name')); });
		thumbnail.appendTo(thumbnailDiv);
		/*alert("fading in");
		
		alert("done with fade");*/
		
	}
	thumbnailDiv.fadeIn(200);
	if(slide > 0) {
		// make next appear
		$("#backButton").css("display", "inline");
	}
	else {
		$("#backButton").css("display", "none");
	}
	
	if(i < currentThumbnails.length) {
		$("#nextButton").css("display", "inline");
	}
	else {
		$("#nextButton").css("display", "none");
	}
	
	if(slide > 0 && i < currentThumbnails.length) {
		$("#middleBar").css("display", "inline");
	}
	else {
		$("#middleBar").css("display", "none");
	}
}

var incrementThumbnailSlide = function() {
	currentThumbnailSlide++;
	loadThumbnailSlide(currentThumbnailSlide);
}

var decrementThumbnailSlide = function() {
	currentThumbnailSlide--;
	loadThumbnailSlide(currentThumbnailSlide);
}


var loadFirstThumbnails = function() {
	currentThumbnailSlide = 0;
	loadThumbnailSlide(currentThumbnailSlide);
}

var currentPreloadId = 0;
var preloaderImage;

var loadPreloadCallback = function(data) {
	var src = data['src'];
	preloaderImage.onLoad = preloadIndividual();
	//alert("preload callback for " + data['id']);
	preloaderImage.src = data['src'];
}

var preloadIndividual = function() {
	if(currentPreloadId < currentThumbnails.length) {
		var imageId = currentThumbnails[currentPreloadId].attr('name');
		//alert("item " + currentPreloadId + ", queuing server for " + imageId);
		currentPreloadId = currentPreloadId + 1;
		loadImage(imageId, true);
	}
}
	
var preloadImages = function() {
	preloaderImage = new Image();
	currentPreloadId = 0;
	preloadIndividual();
}	

var processThumbnails = function(data) {
	currentThumbnails = [];
	var firstId = true;
	// load first four thumbnails, then load the rest in a few seconds
	//for(var index = 0; index < 4 && index < data.length; index++) ( function(index) {
	for(var index in data) ( function(index) {
		var image = data[index];
		var id = image['imageId'];
		if(firstId) {
			loadImageFirst(id);
			firstId = false;
		}
		var src = image['src'];
		//'img', {'src': src }, []
		var imgEl = $.create('img', {}, []);
		
		// load first 4 thumbnails right away
		if(index < 4) {
			imgEl.attr('src', src);
		}
		// load other thumbnails later
		else {
			setTimeout(function() { imgEl.attr('src', src); }, 2000);
		}
		var divEl = $.create('div', {'name': id, 'class': 'thumbnail'}, [imgEl]);
		currentThumbnails.push(divEl);
	})(index);
	//preloadImages();
	loadFirstThumbnails();
}


var loadCategory = function(id) {
	clearThumbs();
	clearPicture();	
	setTimeout(function() {
		var info = categoryInfo[id];
		if(info) {
			var description = info[0];
			var imageId = info[1];
			
			if(imageId) {
				loadCategoryImage(imageId);
			}
			
			
			categoryDescriptionDiv.fadeOut(baseFadeTime, function() {
				if(description) {
					categoryDescriptionDiv.text(description);
					categoryDescriptionDiv.fadeIn();
				}
			});
		}
		$("#backButton").css("display", "none");
		$("#nextButton").css("display", "none");
		$("#middleBar").css("display", "none");
		
		
		
		
		highlightCategory(id);
		currentCategory = id;
		var get = "image/categorythumbs/" + id;
		$.getJSON(get,
	        function(data){
				if(typeof(pageTracker) != "undefined") {
					pageTracker._trackPageview("/portfolio/" + id);
				}
				processThumbnails(data);
	        });
	        
	 }, (currentImageId > 0) ? baseFadeTime : 0);
}

var categoryInfo = {};

var displayCategories = function(toplevelcategory) {
	var description = toplevelcategory['description'];
	var image = toplevelcategory['image'];
	
	categoryDescriptionDiv.fadeOut(baseFadeTime);
	pictureTextDiv.fadeOut(baseFadeTime, function() {
				if(description) {
					var textdiv = $.create('div', {'style': 'margin-top: 0px'}, description);
					textdiv.appendTo(pictureTextDiv);
					//pictureTextDiv.text(description);
					pictureTextDiv.fadeIn(baseFadeTime);
					//categoryDescriptionDiv.css('display', 'inline');
				}
				if(image) {
					pictureDiv.empty();
					pictureDiv.css('padding-top', '44px');
					var imgEl = $.create('img', {'src': image }, []);
					imgEl.appendTo(pictureDiv);
					pictureDiv.fadeIn(baseFadeTime);
				}
			});
	var categories = toplevelcategory['categories'];
	//$("#topLevelCategory").text(toplevelcategory['name']);
	categoryInfo = [];
	for(var index in categories) ( function(index) {
		var category = categories[index];
		var id = category['id'];
		var name = category['name'];
		var description = category['description'];
		var imageId = category['imageId'];
		var newEl = $.create('div', {'id': id, 'class': 'hand subhead verticalbuffer'}, name);
		categoryInfo[id] = [description, imageId];
		newEl.click( function() { loadCategory(id) });
		newEl.appendTo(categoryDiv);	
	})(index);
}

// get all categories

var loadCategoriesForRootCategory = function(rootId, firstLoad) {
	clearCategories();
	clearThumbs();
	clearPicture();
	currentImageId = -1;
	$("#backButton").css("display", "none");
	$("#nextButton").css("display", "none");
	$("#middleBar").css("display", "none");
	
	highlightMainCategory(rootId);
	var get = "image/toplevelcategory/" + rootId;
	$.getJSON(get,
        function(data){
			displayCategories(data);
        });
}

var initializeArtwork = function() {
	if($('#artworkLeftBar').length) {
		mainCategoryDiv = $("#mainCategories");
		categoryDiv = $("#categories");
		thumbnailDiv = $("#thumbnails");
		pictureDiv = $("#picture");
		pictureTextDiv = $("#pictureText");
		categoryDescriptionDiv = $("#categoryDescription");
		
		$("#backButton").click(function() { decrementThumbnailSlide(); });
		$("#nextButton").click(function() { incrementThumbnailSlide(); });
		
		$("#root1").click(function() { loadCategoriesForRootCategory(1); });
		$("#root5").click(function() { loadCategoriesForRootCategory(5); });
		
		categoryDescriptionDiv.hide();
		
		loadCategoriesForRootCategory(rootCategoryFromServer);
	}
}