// JavaScript Document
$(function() {
	//caching
	//next and prev buttons
	var $cn_next	= $('#cn_next');
	var $cn_prev	= $('#cn_prev');
	//wrapper of the left items
	var $cn_list 	= $('#cn_list');
	var $pages		= $cn_list.find('.cn_page');
	//how many pages
	var cnt_pages	= $pages.length;
	//the default page is the first one
	var page		= 1;
	//list of news (left items)
	var $items 		= $cn_list.find('.cn_item');
	//the current item being viewed (right side)
	var $cn_preview = $('#cn_preview');
	//index of the item being viewed. 
	//the default is the first one
	var current		= 1;
	/*
	for each item we store its index relative to all the document.
	we bind a click event that slides up or down the current item
	and slides up or down the clicked one. 
	Moving up or down will depend if the clicked item is after or
	before the current one
	*/
	$items.each(function(i){
		var $item = $(this);
		$item.data('idx',i+1);
		
		var idx			= $(this).data('idx');
		var $current 	= $cn_preview.find('.cn_content:nth-child('+current+')');
		var $next		= $cn_preview.find('.cn_content:nth-child('+idx+')');
		if (idx !== current){
			$next.css({'top':'-450px'}).stop()
		} else {
			$next.css({'top':'5px'}).stop()
        }
		$item.bind('click',function(){
			var $this 		= $(this);
			$cn_list.find('.selected').removeClass('selected'); //remove selected status from old item
			$this.addClass('selected'); //add selected status to clicked list item
			var idx			= $(this).data('idx');
			var $current 	= $cn_preview.find('.cn_content:nth-child('+current+')');
			var $next		= $cn_preview.find('.cn_content:nth-child('+idx+')');
			
			if(idx > current){
				$current.stop().animate({'top':'-450px'},600,'easeOutBack',function(){
					$(this).css({'top':'460px'});
				});
				$next.css({'top':'460px'}).stop().animate({'top':'5px'},600,'easeOutBack');
			}
			else if(idx < current){
				$current.stop().animate({'top':'460px'},600,'easeOutBack',function(){
					$(this).css({'top':'460px'});
				});
				$next.css({'top':'-400px'}).stop().animate({'top':'5px'},600,'easeOutBack');
			}
			current = idx;
		});
	});
	
	/*
	shows next page if exists:
	the next page fades in
	also checks if the button should get disabled
	*/
	$cn_next.bind('click',function(e){
		var $this = $(this);
		if(cnt_pages > 1) //Make sure both nav btns stay disabled w/only 1 page
		{
			$cn_prev.removeClass('disabled');
			++page;
			if(page == cnt_pages)
				$this.addClass('disabled');
			if(page > cnt_pages){ 
				page = cnt_pages;
				return;
			}	
			$pages.hide();
			$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
			e.preventDefault();
		}
	});
	/*
	shows previous page if exists:
	the previous page fades in
	also checks if the button should get disabled
	*/
	$cn_prev.bind('click',function(e){
		var $this = $(this);
		if(cnt_pages > 1) //Make sure both nav btns stay disabled w/only 1 page
		{
			$cn_next.removeClass('disabled');
			--page;
			if(page == 1)
				$this.addClass('disabled');
			if(page < 1){ 
				page = 1;
				return;
			}
			$pages.hide();
			$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
			e.preventDefault();
		}
	});
	
});