$(document).ready(function(){
	
    $('#sidebar ul.children').each(function(){
        var $firstText = $(this).find('li a:first');
        text_animate($firstText, 500);
    });
	
	$('.album a').click(function(){
		var url_str = $(this).attr('href');
		$('#container').append('<div class="loading"><img src="./icons/ajax-loader(2).gif" /></div>');
		$.ajax({
			url: url_str,
			dataType: 'html',
			success: function(data){
				$('#container .loading').remove();
				var $content = $('#content');
				zoom($content, data, 500);
			}
		});
		return false;
	});
    
    //$('div.content').tinyscrollbar();
    
    var $news = $('#footer ul.news li');
    scroll_up_news($news, 5000);
});

//scroll up news in footer
var total;
var current_news;
var old_news ;
var news_interval;

function scroll_up_news($news, interval){
    total = $news.size();
    current_news = 0;
    old_news = 0;
    
    $news.filter(':eq(' + current_news + ')').css('top', '10px');
    news_interval = setInterval(function(){news_rotate($news)}, interval);
    $news.parent().hover(function(){
        clearInterval(news_interval);
    }, function(){
        news_interval = setInterval(function(){news_rotate($news)}, interval);
    });
}

function news_rotate($news){
    current_news = (old_news + 1)%total;
    $news.filter(':eq('+ old_news +')').animate({'top' : '-100px'}, 1200, function(){
        $(this).css('top', '100px');
    });
    
    $news.filter(':eq('+ current_news +')').animate({'top' : '10px'}, 1200);
    old_news = current_news;
}

function text_animate($text, duration){
    $last = $text.parent().parent().find('li a:last');
	if($text.is($last)){
		$text.animate({'left' : '0px', 'opacity' : 1}, duration);
	}else{
		var $next = $text.parent().next().find('a');
		$text.animate({'left' : '0px', 'opacity' : 1}, duration,function(){
			text_animate($next, duration)
		});
	}
}

function zoom($content, data, duration){
	$content.wrap('<div id="viewport"></div>');
	var $viewport = $('#viewport');
	$viewport.css({'position' : 'relative', 'float' : 'left',
	'overflow' : 'hidden'});
	$viewport.width($content.width());
	$viewport.height($content.height());
	
	$viewport.append('<div id="left"></div>');
	var $left = $('#left');
	$left.css('background', '#C8C7C3');
	$left.width($content.width()/2);
	$left.height($content.height());
	$left.css('left', '-' + $content.width()/2 + 'px');
	$left.css('position','absolute');
	
	$viewport.append('<div id="right"></div>');
	var $right = $('#right');
	$right.css('background', '#C8C7C3');
	$right.width($content.width()/2);
	$right.height($content.height());
	$right.css('left', + $content.width() + 'px');
	$right.css('position','absolute');
	
	$viewport.append('<div id="top"></div>');
	var $top = $('#top');
	$top.css('background', '#C8C7C3');
	$top.width($content.width());
	$top.height($content.height()/2);
	$top.css('top', '-' + $content.height()/2 + 'px');
	$top.css('position','absolute');
	
	$viewport.append('<div id="bottom"></div>');
	var $bottom = $('#bottom');
	$bottom.css('background', '#C8C7C3');
	$bottom.width($content.width());
	$bottom.height($content.height()/2);
	$bottom.css('top', '-' + $content.height() + 'px');
	$bottom.css('position','absolute');
	
	//zoom out
	$content.animate({'opacity' : 0.1}, duration);
	$left.animate({'left': 0 + 'px'}, duration);
	$right.animate({'left': $content.width()/2 + 'px'}, duration);
	$top.animate({'top': 0 + 'px'}, duration);
	$bottom.animate({'top': $content.height()/2 + 'px'}, 
	duration, function(){
		$content.html(data);
	});
	
	//zoom in
	$left.animate({'left': '-' + $content.width()/2 + 'px'},
	duration, function(){
		$(this).remove();
	});
	$right.animate({'left': $content.width() + 'px'},
	duration, function(){
		$(this).remove();
	});
	$top.animate({'top': '-' + $content.height()/2 + 'px'},
	duration, function(){
		$(this).remove();
	});
	$bottom.animate({'top': $content.height() + 'px'},
	duration, function(){
		$(this).remove();
		$viewport.replaceWith($content);
	});
	$content.animate({'opacity' : 1}, duration, function(){
	   loading = false;
	});
}