var old;

$(document).ready(function(){
	
	$('.smallImage').hover( function () {
			$(this).find(":nth-child(2)").stop().css('opacity', '0').fadeOut();
		}, function () {
			$(this).find(":nth-child(2)").stop().css('opacity', '1').fadeIn();		
		}
	);

	$(".menuitem").hover(function () {
		$(this).removeClass('menuitem').addClass('menuitemh');
		$(this).css('background-image', $(this).css('background-image').replace(/(0\.png)/gi, '\.png'));
		if ($(this).html()=='about me')
			$(this).css({'margin-top':'-18px','line-height':'55px'});
	},function () {
		if ($(this).html() == $("#topBar").html())
			return;
		$(this).removeClass('menuitemh').addClass('menuitem');
		$(this).css('background-image', $(this).css('background-image').replace(/(\.png)/gi, '0\.png'));
		
		if ($(this).html()=='about me')
			$(this).css({'margin-top':'-13px','line-height':'45px'});
	});
	
	$(".menuitem").click(
		function () {
			if ($(this).html()=='about me')
				$(this).css({'margin-top':'-18px','line-height':'55px'});	
			newClass = $(this).attr('class').split(' ')[0]+'';
			
			if (old) {
				old.css('background-image', old.css('background-image').replace(/(\.png)/gi, '0\.png'));
				old.removeClass('menuitemh').addClass('menuitem');
				oldClass = old.attr('class').split(' ')[0]+'';
				$("#topBar").removeClass(oldClass+'Top').addClass(newClass+'Top');
				$("#bottomBar").removeClass(oldClass+'Bottom').addClass(newClass+'Bottom');
				
				if (old.html()=='about me')
					old.css({'margin-top':'-13px','line-height':'45px'});
			} else {
				$("#topBar").removeClass('aboutTop').addClass(newClass+'Top');
				$("#bottomBar").removeClass('aboutBottom').addClass(newClass+'Bottom');
			}

			$(this).removeClass('menuitem').addClass('menuitemh');
			$(this).css('background-image', $(this).css('background-image').replace(/(0\.png)/gi, '\.png'));

			$("#topBar").html($(this).html().replace(/<\/?[^>]+>/gi, ''));
			old = $(this);
			
			$.ajax({
				url: '/ajax/load',
				type: 'post',
				data: {
					'where': $("#topBar").html()
				},
				beforeSend: function(){
					$("#bottomLoader").show();
					old.css('cursor', 'wait');
					$('body').css('cursor', 'wait');
				},
				success: function(data){
					$("#bottomLoader").hide();
					$('body').css('cursor', 'default');
					old.css('cursor', 'pointer');
					$('#otherImages').html(data);
				}
			});
		}
	);
	
	$('#photo').hover(function () {
		if ($('#photoTitle').html() || $('#photoAbout').html())
			$('#photo .photo_about').fadeIn();
	},function () {
		if ($('#photoTitle').html() || $('#photoAbout').html())
			$('#photo .photo_about').fadeOut();
	});
	
	$.ajax({
		url: '/ajax/main',
		beforeSend: function(){
			$("#otherImages").append('<center><img id="imageLoader" src="images/big-loader.gif"/></center>');
		},
		success: function(data){
			$('#otherImages').html(data);
		}
	});
	
	$('#nextButton').append('<div></div>').children('div').css({'background-image':'url(images/button_next.png)','display':'none'});
	$('#nextButton').hover(
		function () {
			$(this).children('div').fadeIn('1000'); 
		},
		function () {
			$(this).children('div').fadeOut(); 
		}
	).click(
		function () {
			small = $('#'+$('#bigPhotoId').val()).next();
			if (small.attr('id')) {
				small.click();
			} else {
				page = $('.pages span').next();
				if (page.html()) {
					page.click();
				} else {
					loadPage (1);
				}			
			}
		}
	);

	$('#prevButton').append('<div></div>').children('div').css({'background-image':'url(images/button_prev.png)','display':'none'});
	$('#prevButton').hover(
		function () {
			$(this).children('div').fadeIn('1000'); 
		},
		function () {
			$(this).children('div').fadeOut(); 
		}
	).click(
		function () {
			small = $('#'+$('#bigPhotoId').val()).prev();
			if (small.attr('id')) {
				small.click();
			} else {
				page = $('.pages span').prev();
				if (page.html()) {
					page.click();
				} else {
					loadPage ('last', 1);
				}
			}
		}
	);
	
	
	
});

function loadPage (page, prev) {
	$.ajax({
		url: '/ajax/load',
		type: 'post',
		data: {
			'page':		page,
			'showlast':	prev
		},
		beforeSend: function(){
			$("#bottomLoader").show();
		},
		success: function(data){
			$("#bottomLoader").hide();
			$('#otherImages').html(data);
		}
	});
	return false;
}