var photoLoading = false;

$(window).load(function() {
    $("#photo-wrapper").hide();
    
    $("#filmstrip li a").each(function() {
        $(this).bind('click', function() { 
            loadPhoto($(this).attr('rel')); 
            return false;
        });
    });
    
    sizeElements();
    
    $('#filmstrip').css('display', 'block').jcarousel({
        initCallback : carouselInit
    });
    
    $(window).bind('resize', sizeElements);
        
    $("ul#tabs > li").each(function() { 
        $(this).bind('click', function() {
            var theLi = this;
            var tabIsOpen = $(theLi).hasClass("openTab");
            
            if(tabIsOpen) {
                $(theLi).removeClass("openTab");
                $(theLi).animate({
                    right: "-310px"
                }, 250);
            } else {
                $("li.openTab").each(function() {
                    $(this).removeClass("openTab");
                    $(this).animate({
                        right: "-310px"
                    }, 250);
                });
                $(theLi).addClass("openTab");
                $(theLi).animate({
                    right: "0px"
                }, 250);
            }
        });
    });
    
    loadPhoto($("#filmstrip li a").attr('rel'));

});

function sizeElements() {
    $(".jcarousel-skin-phototeknis").css('width', $("#wrap").width() + "px");
    $("#tabs").css('height', ($(window).height() - 212) + "px");
    $("#photo-info").css('max-height', ($(window).height() - 272) + "px");
    $("#comment-list").css('max-height', ($(window).height() - 304) + "px");
    $("#about-content").css('max-height', ($(window).height() - 361) + "px");
}

function toggleFilmstrip() {
    var stripIsOpen = $(".jcarousel-skin-phototeknis").hasClass("visible")
    if(stripIsOpen) {
        $(".jcarousel-skin-phototeknis").removeClass("visible").animate({
            bottom: "-99px"
        }, 500);
        $("#filmstrip-toggle").animate({
            bottom: "0px"
        }, 500);
        $("#filmstrip-toggle a").text('Show Filmstrip');
    } else {
        $(".jcarousel-skin-phototeknis").addClass("visible").animate({
            bottom: "0px"
        }, 500);
         $("#filmstrip-toggle").animate({
            bottom: "99px"
        }, 500);
        $("#filmstrip-toggle a").text('Hide Filmstrip');
    }
}

function loadPhoto(photoId) {
    //$("#thePhoto").attr('src', fullUrl);
    
    if(photoLoading == false) {
        photoLoading = true;
        $('#photo-loading').show();
        $('#photo-wrapper').fadeOut("fast", function() { 
            $("#photo img").remove(); 
            
            $.getJSON("getPhoto.php", { photo : photoId }, 
            function(data){
                var img = new Image();
                var photo = data.photo;
                var comments = data.comments;
                var exif = data.exif[0];
        
                $(img).load(function () {
                    $('#photo').prepend(this);
                    $("#photo-title").text(photo.title);
                    $("#photo-description").text(photo.description);
                    $("#photo-wrapper").fadeIn("fast");
                    $("#photo-wrapper").css('width', $(this).width() + 38 + 'px');
                    $("#photo").css('width', $(this).width() + 'px');
                    $(this).bind('click', showNextPhoto);
                    $('#photo-loading').hide();
                    $("#page-loading").fadeOut("fast");
                    
                    $("#photo-info").remove();
                    
                    var infoList = $("<ul>").attr("id", "photo-info");
                    var exifTable = $("<table>").attr("id", "exif-table");
                    
                    $(exifTable).append($("<tr>").html("<td><strong>Date Taken:</strong></td><td>" + photo.date_taken + "</td>"));

                    if(exif && exif.length > 0) {
                        for(var i = 0; i < exif.length; i++) {
                            switch(exif[i].label) {
                                case "Model":
                                    $(exifTable).append($("<tr>").html("<td><strong>Camera:</strong></td><td>" + exif[i].raw._content + "</td>"));
                                    break;
                                case "Exposure":
                                case "Aperture":
                                case "Focal Length":
                                case "Flash":
                                    if(exif[i].clean) {
                                        $(exifTable).append($("<tr>").html("<td><strong>" + exif[i].label + ":</strong></td><td>" + exif[i].clean._content + "</td>"));
                                    }
                                    break;
                                case "ISO Speed":
                                    $(exifTable).append($("<tr>").html("<td><strong>" + exif[i].label + ":</strong></td><td>" + exif[i].raw._content + "</td>"));
                                    break;
                            }
                            
                        }
                    }
                    
                    $(infoList).append(exifTable);
                    $("#more-info-tab").append(infoList);
                    $("#exif-table tr:even").addClass("striped");
                    
                    $("#comment-count").text(photo.numComments);
                    
                    $("#comment-list").remove();
                    var commentList = $("<ul>").attr("id","comment-list");
    
                    for(i = 0; i < comments.length; i++) {
                        var comment = comments[i];
                        var commentItem = $("<li>").attr("id", "comment" + comment.commentId);
                        $(commentItem).html("<p>" + comment.content + "</p>");
                        
                        var commentMeta = $("<p>").addClass("comment-meta");
                        $(commentMeta).append("<a href=\"http://www.flickr.com/people/" + comment.authorId + "\">" + comment.authorName + "</a>");
                        $(commentMeta).append("@ <a href=\"" + comment.permalink + "\">" + comment.dateCreate + "</a>");
                        $(commentItem).append(commentMeta);
                        
                        $(commentList).append(commentItem);
                    }
                    
                    var addCommentLi = $("<li>").addClass("addCommentLink");
                    var addCommentLink = $("<a>");
                    $(addCommentLink).attr("href", "http://www.flickr.com/photos/whatsbruin/" + photo.flickrId + "/#reply");
                    $(addCommentLink).text("Add your comment");
                    $(addCommentLi).append(addCommentLink);
                    $(addCommentLi).append(" on Flickr");
                    $(commentList).append(addCommentLi);
                    
                    $("#comments-tab").append(commentList);
                    
                    sizeElements();
                    
                    photoLoading = false;
            
                }).error(function () {
                    alert("ERROR");// notify the user that the image could not be loaded
                }).attr('src', photo.full_url);
            });
        });
        
        $('.activePhoto').each(function() {
            $(this).removeClass('activePhoto');
        });
        
        $('li#photo' + photoId).addClass('activePhoto');
    }
    
}

function showNextPhoto() {
    if($("li.activePhoto + li:first a").attr('rel')) {
        loadPhoto($("li.activePhoto + li:first a").attr('rel'));
    } else {
        loadPhoto($("ul#filmstrip > li:first > a").attr('rel'));
    }
}

function showPrevPhoto() {
    var curIndex = $("ul#filmstrip > li").index($("li.activePhoto"));
    
    if(curIndex > 0) {
        loadPhoto($("ul#filmstrip > li").eq(curIndex - 1).find("a:first").attr('rel'));
    }
}

var theCarousel;

function carouselInit(carousel) {

    theCarousel = carousel;
    
    sizeElements();
    
    theCarousel.options.scroll = Math.floor($('.jcarousel-clip').width() / 85);
    
    $(window).bind('resize', function() {
        theCarousel.options.scroll = Math.floor($('.jcarousel-clip').width() / 85);
    });
    
    $(".jcarousel-skin-phototeknis").addClass("visible");
    $("#filmstrip-toggle").removeClass("hidden");
    
}

function zoomPhotoIn() {
  $("#photo img").animate({ 
        width: "150%"
      }, 1000 ).unbind('click').bind('click', zoomPhotoOut);
}

function zoomPhotoOut() {
  $("#photo img").animate({ 
        width: "100%"
      }, 1000 ).unbind('click').bind('click', zoomPhotoIn);
}