$(document).ready(function(){

        // vertically align photographer list. 
 				// add a manual check to make sure CSS has loaded to avoid improper values
				if ($('#site-wrapper').css('position') == 'relative') {
        	$('#col-left .inner ul').vAlign();
        	$('#col-middle .inner ul').vAlign();
        	$('#col-middle #headshots').vAlign();
			 }
        

        $("#col-left .inner li:not('.active') a").hover(function(){
          
            $(this).css({ color: '#fff' });
         }, function() {
                $(this).animate({ color: '#6a6a6a' })
         });






        // Initialize our image stacks. See: wm.imageStack.jquery.js
        // We're treating the specialty list as an image stack, as well
        $.fn.WMImageStack({
            lists:  [$('#photographer-list')],
                 
            stacks: [$('#col-middle #headshots'),
                     $('#featured-images')]
            });

            $('#featured-images img').onImagesLoad( {
                itemCallback: imageLoaded
            });

            $('#featured-images img').error(function() {
                imageBroken($(this));
            });

        introAnimation();
    
});

function imageBroken(image) {
    var url = image.parent().attr('href');
    imageLoaded(image);
    var message = $("<div class='error-load'><p>This image is missing.</p><p class='message'>Visit this photographer's <a target='_blank' href='" + url + "'> website</a> to see all of their work.</div>");
    image.closest('li').prepend(message);
}

function imageLoaded(img) { 
    $(img).closest('li').children('.photo-load').remove();
}

function preImageLoad() {
	$('#mask').show();
}

function postImageLoad() {



}

function introAnimation() {

    // hide stuff at the outset
    if ($('#col-left .inner ul').length < 2) {
        //$('#col-left').animate({ width: '165px' }, 600);
        //$('#site-wrapper').animate({ width: '52em'}, 600);
    }
            $('#logo').fadeIn(800, function() {
                $('#mask').animate({
                        width: $("#col-middle .inner").width()
                }, 500, function() {
                        $(this).fadeOut(100);
                        $('#col-right .bottom-nav').fadeIn(200);
                });
            });



  
}


(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
	return this.each(function(i){
	var ah = $(this).height();
	var ph = $(this).parent().height();
	var mh = (ph - ah) / 2;
	$(this).css('margin-top', mh);
	});
};
})(jQuery);