/// <reference path="jquery-1.4.2.js" />

$(function () {
    if ($('#photo-gallery').length < 1) return;

    FaceClientAPI.init('a9ba0b2787f900ceb6ecf550602a6438');

    var countOfPhotos = $('#other-photos ul a').length;
    var photoCarouselSize = 9;      // This constant variable is only used to determine when to stop the user from scrolling forward.
    var $currentLi = $('#other-photos ul li:first');    // Initially set currentLi to the first ListItem.
    var liTotalWidth = ($currentLi.width() + 4);

    // show the first photo by default
    showPhoto(0);

    $('#other-photos ul a').click(function () {
        return showPhoto($(this).parent().index());
    });

    $('#current-photo .controls .back').click(function () {
        var $currentLink = $('#other-photos li a.current');
        var currentIndex = $currentLink.parent().index();
        if (currentIndex > 0) {
            showPhoto(currentIndex - 1);
        }
        return false;
    });

    $('#current-photo .controls .forward').click(function () {
        var $currentLink = $('#other-photos li a.current');
        var currentIndex = $currentLink.parent().index();
        if (currentIndex < (countOfPhotos - 1)) {
            showPhoto(currentIndex + 1);
        }
        return false;
    });

    function currentLiMarginLeft() {
        return parseInt($currentLi.css('margin-left').replace('px', ''));
    }

    function scrollCarouselForward() {
        // Calculate the last ListItem index to stop user from scrolling forward.
        var lastLiIndex = (countOfPhotos - 1) - photoCarouselSize;

        if ($currentLi.index() != lastLiIndex) {
            var liMarginLeft = currentLiMarginLeft();

            $currentLi
			.animate(
				{ marginLeft: liMarginLeft - liTotalWidth },
				'fast', 'swing', null);

            $currentLi = $currentLi.next();
        }
    }

    function scrollCarouselBack() {
        if ($currentLi.index() != 0) {
            $currentLi = $currentLi.prev();
            var liMarginLeft = currentLiMarginLeft();
            $currentLi
			.animate(
				{ marginLeft: liMarginLeft + liTotalWidth },
				'fast', 'swing', null);
        }
    }

    $('#other-photos .back').click(function () {
        scrollCarouselBack();
        return false;
    });

    $('#other-photos .forward').click(function () {
        scrollCarouselForward();
        return false;
    });

    function detectFaces() {
        FaceTagger.clear();

        FaceTagger.load("img.main-photo", {
            click_add_tag: false,
            resizable: true,
            facebook: true,
            fade: true,
            tags_list: true,
            add_tag_button: true,
            error: tagger_error
        });
    }

    function tagger_error(err) {
        if (err.error_code && err.error_message)
            alert(err.error_code + ": " + err.error_message);
        else
            alert(err);
    }

    function getOriginalImage(src) {
        var imageObject = new Image();
        imageObject.src = src;
        return imageObject;
    }

    function showPhoto(index) {
        var $link = $('#other-photos ul li:eq(' + index + ') a');
        var $img = $link.children('img');
        var $div = $link.children("div");
        var $currentPhoto = $('#current-photo .photo.current img.main-photo');

        // set 'current' class on this item
        $('#other-photos a').removeClass('current');
        $link.addClass('current');

        // show image
        $currentPhoto.attr('src', "/vmusic/images/loading.gif");
        $currentPhoto.attr('src', $link.attr('href'));

        var imageObject = getOriginalImage($currentPhoto.attr('src'));

        // if the photo is in landscape mode, set the width to 700px to fill the whole space.
        if (imageObject.width > imageObject.height) {
            $currentPhoto.css("width", "700px");
        }
        else {
            // Otherwise set width to auto if the photo is in portrait mode to keep aspect ratio.
            $currentPhoto.css("width", "auto");
        }

        detectFaces();

        // show caption
        $('#current-photo .caption')
			.animate(
				{ bottom: -63, opacity: 0 },
				'fast',
				'swing',
				function () {
				    $('#current-photo .photo.current .caption .content')
						.html($img.attr('alt').toString().replace('\\n', '<br />'));
				    $(this).animate(
						{ bottom: 0, opacity: 1 },
						'fast',
						'swing');
				});

        $('#current-photo .controls h2').html($div.html().toString().replace('\\n', '<br />'));

        // set indicators underneath caption
        $('#current-photo .controls .place')
			.text((index + 1) + ' of ' + countOfPhotos);

        // scroll carousel (if necessary)
        var $li = $link.parent();
        var liLeft = $li.index() * ($li.width() + 4);
        var marginLeft = $currentLi.css('margin-left').toString().fromPxToInt();

        if ($li.index() < $currentLi.index()) {
            scrollCarouselBack();
        }
        else if (liLeft > ($('#other-photos ul').width() - 1)) {
            scrollCarouselForward();
        }
        return false;
    }
});