$(document).ready(function() {
	
	var documentWidth = $(document).width();
	var thumb_num = $('.overview li').size();
	var newWidth = (thumb_num)*($('.overview li').outerWidth())+10;
	$('#scroll .overview').css({width: newWidth});
	
	$('#scroll .overview ul').css({width: newWidth});

	$('#scroll').tinyscrollbar({axis: 'x', size: (documentWidth-20) });
	
	//first image
	var firstImage = $('.overview li:first img').attr('src').replace('thumbs','real');
	$('#image').attr('src',firstImage);
	var href = $('#image').attr('src');
	$('#image').parent().attr('href', href);
	$('#image').load( function(){
		$(this).animate({opacity : 1});
		ResizeWindow();
	});
	
	//first current
	$('.overview li:first').addClass('current');
	
	//thumbs action

	var wW = $(window).width();
	var wH = $(window).height();
	var imageTopOffset = 70;
	var imageBottomOffset = 130;

	var nH = wH - (imageTopOffset + imageBottomOffset);
	
	$('.big-image').css({ width : wW, height : nH }).css({ top : imageTopOffset });
	
	ResizeWindow();
	

	
	$('.overview li img').live('click', function() {
		$this = $(this);
		var $alt = $(this).attr('alt');

		
		$('.overview li').removeClass('current');
		$(this).parent().addClass('current');
		
		var image = $('.big-image img');
		image.not(':animated').fadeOut( 500, function() {
			image
				.attr('src', $this.attr('src').replace('thumbs','real'))
				.load(function(){
					var eH = image.outerHeight();
					ResizeWindow(image,eH);
					image.parent().attr('href', $this.attr('src').replace('thumbs','real'))
					

			});
		});
		
	});
	
	$('.overview li:not(.current) img').hover( function () {
		$(this).animate({opacity : 1});
    },function () {
		$(this).animate({opacity : .3});
    });
	
	function ResizeWindow(image,eH) {
		
		if ( image && eH)
		{
			var img = image;
			var elementH = eH;
		}
		else
		{
			var img = $('#image');
			var elementH = $('#image').outerHeight();
		}

		img.css({height : nH-20})
		img.css({ marginTop : -( nH/2), marginLeft : -( img.outerWidth()/2) }).fadeIn(500);

	};

	$(window).bind('resize',function(){
	     window.location="http://jumboland.org";
	});

	$('.nav').click(function(){
		switch( $(this).attr('class') ){
			case 'nav prev':				
				if ( $('#scroll li.current').index() <= 1 ) {
					$('.nav.prev').animate({top : 100 , opacity : 0}).addClass('hide');
				}
				if ( $('.nav.next').hasClass('hide') ) {
					$('.nav.next').animate({top : '50%' , opacity : 1}).removeClass('hide');
				}

				
				$('#scroll li.current').prev().find('img').click();
			break;
			case 'nav next':
				if ( $('#scroll li.current').index() >= thumb_num-2 ) {
					$('.nav.next').animate({top : 100 , opacity : 0}).addClass('hide');
				}
				if ( $('.nav.prev').hasClass('hide') ) {
					$('.nav.prev').animate({top : '50%' , opacity : 1}).removeClass('hide');
				}
				$('#scroll li.current').next().find('img').click();
			break;
		}
		
		
		// Rendering the modified versions of the images:
		return false;
	});
	
	/* */
	
	
	$('#foo').bind({
    click: function() {
        // do something
    },
    mouseover: function() {
        // do something
    },
    mouseout: function() {
        // do something
    }
	});
	
	$('.c').bind({
	click: function() {
        window.open ("http://pivanov.com",'_blank');
        return false;
    },
    mouseover: function() {
        $(this).animate({opacity : 1 });
    },
    mouseout: function() {
        $(this).animate({opacity : 0.5 });
    }
	});
	
	
	$(document).keydown(function(e) {
    	switch (e.keyCode) {
        case 37: $('.nav.prev').click(); break;
        case 39: $('.nav.next').click(); break;
        case 38: hideTopNavi(); break;
        case 40: showTopNavi(); break;
    	}
	});

	
});