$(document).ready(function(){
    var ww = $(window).width();
    var wh = $(window).height();
	var ow = 0;
	var oh = 0;

    $(window).resize(function() {
		adjustImage();

    });

	function adjustImage(){
		var large = $('#large');
        var img = $('#large img')

		var h = img.height();
        ww = $(window).width();
        wh = $(window).height();
    
		var hInfo = $('#info').outerHeight();//120;
		var hThumbs = 60;
		var hMargin = 40;
		
        if (h >= wh - hInfo - hMargin - hThumbs){
			if(wh - hInfo - hMargin - hThumbs < oh){
            	h = wh - hInfo - hMargin - hThumbs;
			}else{
				h = oh;
			}
			img.css({'height':h+'px', 'width':'auto'})
        }else{
			h = wh - hInfo - hMargin - hThumbs;
			if(h > oh){
				h = oh;
			}
			img.css({'height':h+'px', 'width':'auto'})
		}

		var wLogo = $('#header').outerWidth();//120;
		var wMargin = 120;
		
        var w = img.width();
        if(w >= ww - wLogo - wMargin){
			if(ww - wLogo - wMargin < ow){
            	w = ww - wLogo - wMargin;
			}else{
				w = ow;
			}
            img.css({'height':'auto', 'width':w+'px'})
        }
		var hTotal = $('#large').height();

        var top  = (wh - hThumbs)/2 - (hTotal)/2; //(hMargin/2; //wh/2 - (h+hMargin+hInfo)/2;
        //var left = (ww-wLogo)/2 - img.width()/2 + wLogo;
    	
		var left = ww/2 - w/2;
        large.css({'top':top+'px', 'left':left+'px', 'visibility':'visible', "display":'block'})

		
	}

    $('#large img').load(function(){
        var h = $(this).height();
        oh = h;

        var w = $(this).width();
		ow = w;
		adjustImage();
		$('#large').removeClass('hidden')
    })

    $('#large').hover(function(){
        $(this).find("#info").removeClass('hidden')
    }, function(){
		$(this).find("#info").addClass('hidden')
    })

	


    $('#header').hover(function(){
        $(this).find("#nav").removeClass('hidden')
    }, function(){
		$(this).find("#nav").addClass('hidden')
    })


    
    $('#overlay').click(function(){
        $(this).fadeOut('fast');
        $('#large').fadeOut('fast');
		$('#thumbs').css({'bottom':'0px'})

		return false;
    })
    
    var selectedImage = null;
    
	// ==================================================
	// Load THumbs
	// ==================================================
	var tWidth = 0;
    var tLoaded = 0;
    var tTotal = $('#thumbs img').length;
    $('#thumbs img').load(function(){
		
		var w = $(this).width();
		var r = Math.ceil(Math.random()*15);

		$(this).width(w-r)
		
		var vDiff = Math.floor((60 - $(this).height())/2);
		$(this).parent().css({'margin-top':vDiff})

        tWidth += $(this).parent().outerWidth(true);
        tLoaded ++;
        if(tLoaded >= tTotal){
            $('#thumbs').width(tWidth);
			var left = $(window).width()/2;
			var marginLeft = $('#thumbs').outerWidth(false)/2 * -1;

			//$('#thumbs').css({'left':left, 'margin-left':marginLeft});
			var count = $('#thumbs').size();
			$('#thumbs a img').each(function(i){
				$(this).css('display', 'none')
					.parent().css('opacity', 1);

				$(this).delay(i*100).fadeIn();
			})

        }
    })

    $('#thumbs a img').hover(function(){
        $(this).fadeTo(100, 1);
    }, function(){
        $(this).fadeTo(100, .6);
    })

	// ==================================================
	// Thumb Click
	// ==================================================
    $('#thumbs a').click(function(){
		var t = $(this);

        //if(selected != undefined && selected != null){
        //    selected.removeClass('selected')
        //}
        //
        //selected = $(this);
        //selected.addClass('selected');
		selectedImage = $(this).index();
		loadImage($(json.item)[selectedImage])
		return false;

    })


	$(json.item).each(function(i, j){
		
		if(j.title == ($('#large .title').text())){
			selectedImage = i;
			return false;
		}
	})
	

	function loadImage(image){
		$('#cv_container').addClass('hidden');
		$('#contact_container').addClass('hidden');
		if($('#contact_container').css('display') != 'none'){
			setTimeout(function(){
				$('#cv_container').css('display', 'none');
				$('#contact_container').css('display', 'none');
			}, 300);
		}
		if($('#right').hasClass('hidden')){
			$('#right, #left').removeClass('hidden').css('display', 'block');
		}
		
		var src = image['@attributes'].src;

        $('#large').fadeOut(100, function(){
			$(this).removeClass('hidden')
            $(this).find('img').remove();
            
            $(this).prepend('<img src="'+src+'" />');
		
			$('#large .title').text(image.title);
			$('#large .year').text(image.year);
			$('#large .medium').text(image.medium);
			$('#large .size').text(image.size);
			$('#large .price').text(image.price);
			
            $("#large img").load(function(){

				$('#large').css({"display":'block', "visibility":'hidden'});
			
				var h = $(this).height();
		        oh = h;
		        var w = $(this).width();
				ow = w;
				
				adjustImage();

				$('#large').css({"display":'none', "visibility":'visible'});
				$(this).parent().fadeIn('fast');
				$('#large').removeClass('hidden');
			});
				
        })

		$('title').text(image.title+' | Suzanne Sattler');
		window.history.pushState('', image.title+' | Suzanne Sattler', '/'+encodeURIComponent(image.title));
		_gaq.push(['_trackPageview', '/'+encodeURIComponent(image.title)]);
	}
	
	function prevImage(){
		if(selectedImage - 1 < 0){
			selectedImage = json.item.length - 1;
		}else{
			selectedImage--;
		}
		loadImage($(json.item)[selectedImage])
	}

	function nextImage(){
		if(selectedImage + 1 >= json.item.length){
			selectedImage = 0;
		}else{
			selectedImage++;
		}
		loadImage($(json.item)[selectedImage])
	}
	
	$('#left').click(function(){
		prevImage();
	})
	$('#right').click(function(){
		nextImage();
	})

	$(document).keydown(function(e){
		var keyCode = e.keyCode || e.which;
		var arrow = {left: 37, up: 38, right: 39, down: 40 };

		switch (keyCode) {
			case arrow.left:
				nextImage();
				break;
			case arrow.right:
				prevImage();
				break;
		}
		
		return false;
	});
	
	
	// Navigation
	var activeNav = null;

	$('#header h1').click(function(){
		var delay = 0;
		$('#cv_container').addClass('hidden');
		$('#contact_container').addClass('hidden');
		$('#large, #right, #left').removeClass('hidden').css('display', 'block');

		setTimeout(function(){
			$('#cv_container').css('display', 'none');
			$('#contact_container').css('display', 'none');
		}, 300);
		
		var s = $('#nav').find('.selected');
		if(s.size() > 0){
			s.removeClass('selected');
		}
		
		activeNav = null;
		return false;
	});
	
	$('#contact').click(function(){
		$('#large, #right, #left').addClass('hidden');
		$('#cv_container').addClass('hidden');
		$('#contact_container').removeClass('hidden').css('display', 'block');
		var s = $('#nav').find('.selected');
		if(s.size() > 0){
			s.removeClass('selected');
		}
		
		setTimeout(function(){
			$('#large, #right, #left').css('display', 'none');
			$('#cv_container').css('display', 'none');
		}, 300);

		$(this).addClass('selected');
		activeNav = $(this).attr('id');
		_gaq.push(['_trackPageview', '/Contact']);
		return false;
	})

	$('#cv').click(function(){
		$('#contact_container').addClass('hidden');
		$('#large, #right, #left').addClass('hidden');
		$('#cv_container').removeClass('hidden').css('display', 'block');
		
		
		var s = $('#nav').find('.selected');
		if(s.size() > 0){
			s.removeClass('selected');
		}

		setTimeout(function(){
			$('#large, #right, #left').css('display', 'none');
			$('#contact_container').css('display', 'none');
		}, 300);
		
		$(this).addClass('selected');
		activeNav = $(this).attr('id');
		_gaq.push(['_trackPageview', '/cv']);		
		return false;
	})

})