$(document).ready(function() {
	//global flickr photoObj
	var photoObj;
    //used to test for IE
    var IE =/*@cc_on!@*/false;

    //preparing feature image obj
    //var fullImage = new Image();
    //$(fullImage).addClass('largePhoto').appendTo('body').hide();

    //index of current feature
    var currentDisplayIndex = -1;
    

    //sets overlay opacity
    $('#overlay').css({
        "opacity": 0.8
    });

    //displays an initial set to kick things off
    displayFlickrSet("72157624228050959");

    //when you click on a nav item with a setId it will ajax the set from flickr
    $('#mainNav div[setId]').click(function() {
        displayFlickrSet($(this).attr("setId"));
    });

    //when clicked 2 of the menu items display a div of txt
    $('#about,#contact').click(function() {
        $('#contactBox,#aboutBox').css({
            "left": $('body').width() / 2 - 250
        });
        $('#overlay').show();
        if (this.id == "about") {
            $('#aboutBox').fadeIn("slow");
        } else if (this.id == "contact") {
            $('#contactBox').fadeIn("slow");
        }
    });

    //when you hover over a menu item it fades the opacity
    $('#mainNav div').hover(function() {
        $(this).animate({
            "opacity": 0.6
        },
        500);
    },
    function() {
        $(this).stop().clearQueue().animate({
            "opacity": 1.0
        },
        200);
    });

    //let arrow click scrolls the bottom scroll bar left
    $('#arrowLeft').click(function() {
    	if($('#overlay').css('display')=='block'){
	    		currentDisplayIndex+=-1;
	    		showImageInfo();
	    		
	    	}else{
	        var left = $(document).scrollLeft();
	        if (left != 0) {
	            $('body,html').animate({
	                scrollLeft: left - 800
	            },
	            {
	                duration: 500,
	                easing: 'easeOutExpo'
	            });
	        }
	    }
    });

    //right arrow click scrolls the bottom scroll bar right
    $('#arrowRight').click(function() {
	    	if($('#overlay').css('display')=='block'){
		    		currentDisplayIndex+=1;
		    		showImageInfo();
		    		
		    	}else{
	        var left = $(document).scrollLeft();
	        $('body,html').animate({
	            scrollLeft: left + 800
	        },
	        {
	            duration: 500,
	            easing: 'easeOutExpo'
	        });
	    }
    });

    //function called to change feature photo
    /*
    function displayPhoto(index) {
        var $imgObj = $('#photoDisplay img').eq(index);
        currentDisplayIndex = index;
        adjustLeftScroll();
        $imgObj.stop().clearQueue().animate({
            "top": 0
        },
        {
            duration: 700,
            easing: 'easeOutBounce'
        });
        $("#overlay").show();
        var imageSrc = $imgObj.attr("src").replace("_z.jpg", "_b.jpg");
        var width;
        var height;
        if($(fullImage).width()==1024){width=1024;height='auto'}else{width='auto';height=1024}
        if($(fullImage).height()>$(document).height()){height=($(document).height()); width='auto'}
        $(fullImage).attr('src', imageSrc).css({
            "height":height,
            "width": width,
            "left": ($('body').width() / 2) - $(fullImage).width() / 2
        });
    } 

    //every time a new feature image finishes loading
    $(fullImage).bind('load',
    function() {
        $(this).css({
            "left": ($('body').width() / 2) - $(fullImage).width() / 2
        });
        if (fullImage.clicked == "fromSmall") {
            if (!IE) {
                $(this).slideDown('slow')
            } else {
                $(this).show()
            }
        } else {
            if (!IE) {
                $(this).fadeIn()
            } else {
                $(this).show()
            }
        }
    }); */
     function showImageInfo() {
    	//$('#photoDetails').hide(); 
        adjustLeftScroll();
		$('#photoDisplay img').css({'z-index':'0'});
		$('#photoDisplay img').eq(currentDisplayIndex).css({'z-index':'10'});
        $("#overlay").show();
        //$('#photoDetails #photoTitle').text(photoObj[currentDisplayIndex].title);
        //$('#photoDetails #photoDescription').html(photoObj[currentDisplayIndex].description);
        //$('#photoDetails #photoDescription p').eq(1).css({'width':'165px','overflow':'hidden'});
        //$('#photoDetails #photoDescription p').eq(2).css({'width':'235px','margin-left':'20px'});
        //$('#photoDetails').fadeIn(); 
	
    } 

    //when the small photo is clicked display it as a feature
    $('#photoDisplay img').live("click",
    function() {
    	
      
       
        $(this).stop().clearQueue().animate({
            "top": 0
        },
        {
            duration: 700,
            easing: 'easeOutBounce'
        });
    	//$(fullImage).hide();
       	//displayPhoto($(this).index());
        //fullImage.clicked = "fromSmall";
        currentDisplayIndex = $(this).index();
        showImageInfo();
        $(this).css({'z-index':'10'});
    });

    //small img hover effect
    $('#photoDisplay img').live('mouseover mouseout',
    function(event) {
        if (event.type == 'mouseover') {
            $(this).animate({
                "top": 15
            },
            {
                duration: 350,
                easing: 'easeInOutQuint'
            });
        } else if (event.type == 'mouseout' && $("#overlay").css('display') != 'block') {
            //if it was clicked on run a diff animation
            $(this).stop().clearQueue().animate({
                "top": 0
            },
            {
                duration: 100,
                easing: 'easeInExpo'
            });
        }
    });
    //hide stuff
    $('#overlay,#aboutBox,#contactBox').live("click",
    function() {
        //$(fullImage).attr('src', '').hide();
        $('#overlay,#aboutBox,#contactBox,#photoDetails').hide();
    });

    //when you click the feature photo, display the next one
    $('.largePhoto').bind('click',
    function() {
        currentDisplayIndex += 1;
        adjustLeftScroll();
        //$(fullImage).hide();
        //fullImage.clicked = "fromLarge";
        var src = $('#photoDisplay img').eq(currentDisplayIndex).attr('src').replace("_z", "_b");
        $(fullImage).attr('src', src);
    });

    //function called to calculate and adjust the scroll bar to match feature image
    function adjustLeftScroll() {
        var distance = 0;
        $('#photoDisplay img').width(function(index, width) {
            if (index < currentDisplayIndex) {
                distance += width + 10;
            }
        });
        $('body,html').animate({
            scrollLeft: distance
        },
        {
            duration: 850,
            easing: 'easeInOutBack'
        });
    }


    //pleload images after 2 seconds
    //setTimeout(function() {preLoadImages()},2000);
    //pulls in and displays small images of a flickr set
    function displayFlickrSet(setId) {
        
        $('#photoDisplay').fadeTo("fast", 0.1);
        $.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=" + setId + "&nsid=55173337@N00&lang=en-us&format=json&jsoncallback=?",
        function(data) {
            $('#photoDisplay').empty();
            photoObj = data.items;
            $.each(data.items,
            function(i, item) {
                photoObj[i].photo = item.media.m.replace("_m", "_z");
                $('#photoDisplay').append("<img src='" + photoObj[i].photo + "'/>");
            });
            $('#photoDisplay').fadeTo("slow", 1);
            var photoDisplayWidth = photoObj.length * 650;
            $('#photoDisplay').css({
                'width': photoDisplayWidth + "px"
            });
            var leftEase = $(document).scrollLeft() + 400;
            $('body,html').animate({
                scrollLeft: 0
            },
            {
                duration: 1500,
                easing: 'easeInOutBack'
            });

        });
    }
    function preLoadImages() {
        $('#mainNav div[setId]').each(function() {
            pullPreLoadImages($(this).attr("setId"));
        });
    }
    function pullPreLoadImages(setId) {
        $.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=" + setId + "&nsid=55173337@N00&lang=en-us&format=json&jsoncallback=?",
        function(data) {
            $.each(data.items,
            function(i, item) {
                new Image().src = item.media.m.replace("_m", "_z");
            });

        });

    }


});

 (function($) {
    $.event.special.load = {
        add: function(hollaback) {
            if (this.nodeType === 1 && this.tagName.toLowerCase() === 'img' && this.src !== '') {
                // Image is already complete, fire the hollaback (fixes browser issues were cached
                // images isn't triggering the load event)
                if (this.complete || this.readyState === 4) {
                    hollaback.handler.apply(this);
                }

                // Check if data URI images is supported, fire 'error' event if not
                else if (this.readyState === 'uninitialized' && this.src.indexOf('data:') === 0) {
                    $(this).trigger('error');
                }

                else {
                    $(this).bind('load', hollaback.handler);
                }
            }
        }
    };
} (jQuery));