// JavaScript Document
$(document).ready(function() {
$('body').pngFix();
///////////////////////// Slider Nav Effect
 $('#slideleft button')
    .hover(function() {
    	var $lefty = $(this).next();
    	$lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0});
  });
///////////////////////// Tabs Effect 
//Get all the LI from the #tabMenu UL  
$('#tabMenu > li').click(function(){	
//perform the actions when it's not selected  
		if (!$(this).hasClass('selected')) {
		//remove the selected class from all LI      
		$('#tabMenu > li').removeClass('selected');  
		//After cleared all the LI, reassign the class to the selected tab  
		$(this).addClass('selected');  
		//Hide all the DIV in .boxBody  
		$('.boxBody div').slideUp('1500');  
		//Look for the right DIV index based on the Navigation UL index  
		$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');  
		}
		}).mouseover(function() {  
		
		//Add and remove class, Personally I dont think this is the right way to do it,   
		//if you have better ideas to toggle it, please comment      
		$(this).addClass('mouseover');  
		$(this).removeClass('mouseout');     
		
		}).mouseout(function() {   
		
		//Add and remove class  
		$(this).addClass('mouseout');  
		$(this).removeClass('mouseover');      
		
		});  
		
		
		//Mouseover with animate Effect for Category menu list  :)  
		$('.boxBody #category li').mouseover(function() {  
		
		//Change background color and animate the padding  
		$(this).css('backgroundColor','#888');  
		$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});  
		}).mouseout(function() {  
		
		//Change background color and animate the padding  
		$(this).css('backgroundColor','');  
		$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});  
		});    
		
		//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.  
		$('.boxBody li').click(function(){  
		window.location = $(this).find("a").attr("href");  
		}).mouseover(function() {  
		$(this).css('backgroundColor','#888');  
		}).mouseout(function() {  
		$(this).css('backgroundColor','');  
		});
///////////////////////// Tooltips Effect
$("ul.sidenav li").hover(function() {
			$(this).find("div").stop()
			.animate({top: "-143px", opacity:1}, "fast")
			.css({'display' : 'block', 'z-index' : '999'})
	
		}, function() {
			$(this).find("div").stop()
			.animate({top: "2px", opacity: 0}, "fast")
			.css("display","none")
		});
///////////////////////// Modal Windows Effect
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
		
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(500);	
		$('#mask').fadeTo("fast",0.2);	
		
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
						
		//Set the popup window to center
		$(id).css('top',  winH/4-$(id).height()/5);
		$(id).css('left', winW/3-$(id).width()/3);
		
		//transition effect
		$(id).fadeIn(1000); 
		
		});
		
		//if close button is clicked
		$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
		});		
		
		//if mask is clicked
		$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
		});
});
//$(document).ready(function() { 
//  		$('#slideleft div.activator')
//  				.hover(function() {
//					var $lefty = $(this).next();
//					$lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0});
//				}, function() {
//					var $lefty = $(this).next();
//					$lefty.animate({left: parseInt($lefty.css('left'),0) == 10 ? -$lefty.outerWidth() : 0});
//  				});
//});