var baseImageContentServicePath = "services/imageContent/";
var loadingImage = false;
var loadingMessageDiv;
var loadingCountElement;
var imageArray = new Array();
var currentImage;
var currentTag;
var altImagesDiv;
var altImageTemplateDiv;
var pageLoadingScreenDiv;
var photoSwipeInstance;

var hashLinkMap;
var menu;

var tagsSpan;
var loadingCounter = 1;
var ignoreNextHashEvent = false;

$(document).ready(function() {
	setupDivVariables();
    setupHashChangeHandler();
	parseHash();
	loadAllTags();
	loadImages();
});

function setupHashChangeHandler() {
    $(window).hashchange(function(event) {
        if (ignoreNextHashEvent) {
            ignoreNextHashEvent = false;
            return;
        }

        var hash = window.location.hash;
        if (hash == "") {
            photoSwipeInstance.hide();
        } else {
            hashLinkMap = new HashLinkMap(window.location.hash);
            showHashLinkedImage();
        }
    });
}

function log(text) {
    console.log(new Date() + ": " + text);
}

function get(url, callback) {
	$.getJSON(baseImageContentServicePath + url, callback);
}

function setupDivVariables() {
	loadingMessageDiv = $('#loadingMessageDiv');
	loadingCountElement = $('#loadingCountSpan');

	tagsSpan = $("#tags");

	menu = $('#menu');

	altImagesDiv = $('#altImagesDiv');
	altImageTemplateDiv = $('#altImageTemplateDiv');
	pageLoadingScreenDiv = $('#pageLoadingScreen');
}

function loadAllTags() {
	get("tags", function(tags) { handleLoadAllTags(tags) });
}

function handleLoadAllTags(tags) {
	tags.forEach(function(tag) {
		addTag(tag);
	});

	makeHashTagActive();
}

function makeHashTagActive() {
	var tagName = hashLinkMap.get("tag");
	if (tagName) {
		setCurrentTag(tagName);
	}
}

function makeCurrentTagActive() {
	var tag = tagMenuItems.find(function(tag) {
		return tag.name == currentTag;
	});

	if (tag) {
		tag.active();
	}
}

function loadImagesForTag(tag) {
	currentTag = tag;
	get("tag/" + tag, function(images) { handleLoadImages(images) });
}

function parseHash() {
	hashLinkMap = new HashLinkMap(window.location.hash);
}

function loadImages() {
	var tag = hashLinkMap.get("tag");
	if (tag) {
		loadImagesForTag(tag);
	} else {
		loadLatestImages();
	}
}

function loadLatestImages() {
	get("latest", function(images) { handleLoadLatestImages(images) });
}

function handleLoadLatestImages(images) {
	var image = images.peek();
	var tag = image.tags.peek();
	setCurrentTag(tag);
	handleLoadImages(images);
}

function setCurrentTag(tag) {
	currentTag = tag;
}

function handleLoadImages(images) {
    if (photoSwipeInstance) {
        window.Code.PhotoSwipe.detatch(photoSwipeInstance);
    }
    $('#Gallery').empty();
    loadingCounter = images.length;
	imageArray = new Array();
	for (var i = 0; i < images.length; i++) {
		var image = images[i];
        image.index = i;
		handleLoadImage(image);
	}

    var options = {
        jQueryMobile: true,
        backButtonHideEnabled: false,
        //imageScaleMethod: "fitNoUpscale",
        getImageSource: function(image) {
            return image.imageFile.src;
        },
        getImageCaption: function(image) {
            var caption = $('<div>');
            caption.append($('<span class="siteTitle text">daveclay.com/art</span><br/>'));
            var nameElement = $('<span>');
            nameElement.addClass("imageName");
            nameElement.text(image.name);
            caption.append(nameElement);

            var dateElement = $('<span>');
            dateElement.addClass("imageDate");
            dateElement.text(image.dateText);
            caption.append(dateElement);

            if (image.properties) {
                var infoElement = $('<span>');
                infoElement.addClass("imageInfo");
                infoElement.text(image.properties["info"]);
                caption.append("<br/>");
                caption.append(infoElement);
            }

            return caption;
        }
    };
    photoSwipeInstance = window.Code.PhotoSwipe.attach(imageArray, options);
    photoSwipeInstance.addEventHandler(window.Code.PhotoSwipe.EventTypes.onDisplayImage, function(event) {
        currentImage = photoSwipeInstance.getCurrentImage().refObj;
        addLinkHash();
    });
    photoSwipeInstance.addEventHandler(window.Code.PhotoSwipe.EventTypes.onHide, function(event) {
        ignoreNextHashEvent = true;
        window.location.hash = "";
    });
}

function showInitialImage() {
	if (hashLinkMap.get("image")) {
		showHashLinkedImage();
	} else {
		var image = imageArray[0];
		handleShowImageContent(image);
	}
}

function showHashLinkedImage() {
    log("loadCounter == " + loadingCounter);
	if (loadingCounter == 0) {
		var id = hashLinkMap.get("image");
        log("hashLinkMap.get(\"image\") == " + id);
		if (id) {
			var image = findImageById(id);
            log("findImageById(" + id + ") == " + image);
			if (image) {
                if (photoSwipeInstance.isHidden() || !photoSwipeInstance.currentIndex) {
                    log("photoSwipeInstance.show(" + image.index + ")");
                    photoSwipeInstance.show(image.index);
                } else {
                    log("photoSwipeInstance.setCurrentImage(" + image.index + ")");
                    photoSwipeInstance.stop();
                    photoSwipeInstance.setCurrentImage(image.index);
                }
			}
		}
	}
}

function findImageById(id) {
    var theImage;
	for (var i = 0; i < imageArray.length; i++) {
		var image = imageArray[i];
		if (image.id == id) {
			theImage = image;
            break;
		}
	}
	return theImage;
}

function handleLoadImage(image) {
	image.grayscaleThumbnailSrc = baseImageContentServicePath + "thumb/grayscale/" + image.name;
	image.thumbnailSrc = baseImageContentServicePath + "thumb/" + image.name;
	image.imageFile.thumbnailSrc = image.thumbnailSrc;
	image.imageFile.src = baseImageContentServicePath + "image/" + image.name;
    var milliseconds = image.date;
    var date = new Date(milliseconds);
    image.dateText = date.format("mmm yyyy");
    image.thumbnailLoaded = false;
    image.handleThumbnailDidLoad = function() {
        if (!this.thumbnailLoaded) {
            this.thumbnailLoaded = true;
            loadingCounter--;
            updateLoadingCount();
            handleThumbnailLoaded();
        }
    };

	var thumbnailDiv = createThumbnailDiv(image);
	image.thumbnailDiv = thumbnailDiv;

	thumbnailDiv.appendTo($("#Gallery"));

	if (imageArray.length > 0) {
		image.previous = imageArray.peek();
		image.previous.next = image;
	}
	imageArray.push(image);
}

function createThumbnailDiv(image) {
	var thumbnailDiv = $('<li>');
	thumbnailDiv.attr("id", image.id);

	var imageLink = $('<a>');
	imageLink.mouseenter(function() { handleMouseEnter(image) });
	imageLink.mouseleave(function() { handleMouseLeave(image) });
    imageLink.click(function() { handleClick(image) });
	thumbnailDiv.append(imageLink);

	var thumbnail = $('<img>');
    thumbnail.attr("class", "thumbnail");
	thumbnail.attr("src", image.grayscaleThumbnailSrc);
	thumbnail.load(function() { image.handleThumbnailDidLoad() });
	imageLink.append(thumbnail);

	return thumbnailDiv;
}

function handleThumbnailLoaded() {
    if (loadingCounter == 0) {
        hideLoadingScreen();
        showInitialImage();
        makeCurrentTagActive();
    }
}

function updateLoadingCount() {
	var total = imageArray.length;
    var numberLoaded = total - loadingCounter;
	var percentage = Math.round((numberLoaded / total) * 100);
	loadingCountElement.text("loading " + percentage + "%");
}

function handleShowImageContent(image) {
	if (currentImage) {
		makeThumbnailInactive(currentImage);
	}

	currentImage = image;
	makeThumbnailActive(image);
	//addAltImageThumbnails(image);
    photoSwipeInstance.show(image.index);
}

function addLinkHash() {
	window.location.hash = "image:" + currentImage.id + "/tag:" + currentTag
}

function doneLoadingImage() {
	loadingImage = false;
}

function clearLinkHash() {
	window.location.hash = null;
}

function hideLoading() {
	loadingMessageDiv.addClass("hidden");
}

function handleClick(image) {
    photoSwipeInstance.show(image.index);
}

function handleMouseEnter(image) {
    makeThumbnailActive(image);
}

function handleMouseLeave(image) {
	if (currentImage != image) {
		makeThumbnailInactive(image);
	}
}

function makeThumbnailActive(image) {
	var thumbnailDiv = image.thumbnailDiv;
	thumbnailDiv.find(".thumbnail").attr("src", image.thumbnailSrc);
}

function makeThumbnailInactive(image) {
	if (!image) return;

	var thumbnailDiv = image.thumbnailDiv;
	thumbnailDiv.find(".thumbnail").attr("src", image.grayscaleThumbnailSrc);
}

function addAltImageThumbnails(image) {
	clearExistingAltImageThumbnails();
	var altImageFiles = image.allAltImageFiles;
	if (altImageFiles.length > 0) {
		addAltImageThumbnail(image.imageFile);
		for (var i = 0; i < altImageFiles.length; i++) {
			var altImageFile = altImageFiles[i];
			altImageFile.thumbnailSrc = baseImageContentServicePath + "thumb/" + image.name + "/" + altImageFile.name;
			altImageFile.src = baseImageContentServicePath + "image/" + image.name + "/" + altImageFile.name;
			addAltImageThumbnail(altImageFile);
		}
	}
}

function clearExistingAltImageThumbnails() {
	altImagesDiv.find("div").remove();
}

function addAltImageThumbnail(imageFile) {
	var altImageDiv = altImageTemplateDiv.clone();
	altImageDiv.attr("id", "alt_" + imageFile.id);
	var link = altImageDiv.find("a");
	link.click(function() { showAltImageFile(imageFile) });

	var imageTag = altImageDiv.find(".altImage");
	imageTag.attr("src", imageFile.thumbnailSrc);
	altImageDiv.removeClass("hidden");
	altImagesDiv.append(altImageDiv);
}

function hideLoadingScreen() {
    pageLoadingScreenDiv.hide();
    hideLoading();
}