$(document).ready(function() {

	$('.catButton').click(function() {

		$('.catButton').removeClass('cat_highlight');
		  
	 	$('.catContent').slideUp(300);
   
		if($(this).next().is(':hidden') == true) {
			
			$(this).addClass('cat_highlight');
			  
			$(this).next().slideDown(300);
		} 
		  
	});
	
	
	$('.postButton').click(function() {

		$('.postButton').removeClass('post_highlight');
		  
	 	$('.postContent').slideUp(300);
   
		if($(this).next().is(':hidden') == true) {
			
			$(this).addClass('post_highlight');
			  
			$(this).next().slideDown(300);
		} 
		  
	});
	
	
		
	/********************************************************************************************************************
	CLOSES ALL DIVS ON PAGE LOAD
	********************************************************************************************************************/	
	$(".catContent").hide();
	$(".postContent").hide();
	
	/********************************************************************************************************************
	OPENS THE DIV THAT IS ASSIGNED WITH THE ID open
	********************************************************************************************************************/	
	$(".catButton:eq(4)").trigger('click');
	// $(".postButton:eq(0)").trigger('click');

	
	
	
    //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 height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
         
        //transition effect    
        $('#mask').fadeIn(1000);   
        $('#mask').fadeTo("slow",0.8); 
     
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
               
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
     
        //transition effect
        $(id).fadeIn(2000);
     
    });
     
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });    
     
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });  


	$('input:text,textarea').each(function() {
		var default_value = this.value;
		$(this).focus(function() {
			if(this.value == default_value) {
				this.value = '';
			}
			if(this.name == "pwd") {
				this.type = "password";
			}
		});
		$(this).blur(function() {
			if(this.value == '') {
				this.value = default_value;
			}
		});
	});  
});

$(function() {
	//the form wrapper (includes all forms)
var $form_wrapper	= $('#form_wrapper'),
	//the current form is the one with class active
	$currentForm	= $form_wrapper.children('form.active'),
	//the change form links
	$linkform		= $form_wrapper.find('.linkform');
		
//get width and height of each form and store them for later						
$form_wrapper.children('form').each(function(i){
	var $theForm	= $(this);
	//solve the inline display none problem when using fadeIn fadeOut
	if(!$theForm.hasClass('active'))
		$theForm.hide();
	$theForm.data({
		width	: $theForm.width(),
		height	: $theForm.height()
	});
});

//set width and height of wrapper (same of current form)
setWrapperWidth();

/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the 
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click',function(e){
	var $link	= $(this);
	var target	= $link.attr('rel');
	$currentForm.fadeOut(400,function(){
		//remove class active from current form
		$currentForm.removeClass('active');
		//new current form
		$currentForm= $form_wrapper.children('form.'+target);
		//animate the wrapper
		$form_wrapper.stop()
					 .animate({
						width	: $currentForm.data('width') + 'px',
						height	: $currentForm.data('height') + 'px'
					 },500,function(){
						//new form gets class active
						$currentForm.addClass('active');
						//show the new form
						$currentForm.fadeIn(400);
					 });
	});
	e.preventDefault();
});

function setWrapperWidth(){
	$form_wrapper.css({
		width	: $currentForm.data('width') + 'px',
		height	: $currentForm.data('height') + 'px'
	});
}

});