//function for focus/blur on inputs
function textInput($element){
	var elementValue = $element.val();
	$element.focus(function(){
		var text  = $(this).val();		
		if (text == elementValue){
			$(this).val('');
		} 
	}).blur(function(){
		var text  = $(this).val();
		if (text == ''){
			$(this).val(elementValue);
		} 
		
	});
}
        // What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
        $(document).ready(function() {
        textInput($('div#parola input'));
		textInput($('div#utilizator input'));
				interval = $('#browsable').width();
				curval = 0
				i = 0
				
				$('div#prev').hide();
				// initialize scrollable together with the navigator plugin
				$('a.nextPage').click(function(){
						if ((i<2) && (i>=0)){
							 $('div.items').animate({left:curval-=interval},700,'swing');
							 i++;
							 $('div.grid').removeClass("activ");
							 $('#footer'+(i+1)).addClass("activ");
							 $('div#prev').fadeIn(700);
							 if (i==2) $('div#next').fadeOut(700);
						}
				});
			   
				$('a.prevPage').click(function(){
						if ((i<=2) && (i>0)){
							 $('div.items').animate({left:curval+=interval},700,'swing');
							 i--;
							 $('div.grid').removeClass("activ");
							 $('#footer'+(i+1)).addClass("activ");
							 $('div#next').fadeIn(700);
							 if (i==0) $('div#prev').fadeOut(700);							 
						}
				})

				$('#footer1').click(function(){
						 $('div.items').animate({left:curval=0},700,'swing');
						 i=0;
						 $('div.grid').removeClass("activ");
						 $('#footer1').addClass("activ");
						 $('div#next').fadeIn(700);
						 $('div#prev').fadeOut(700);	
				});
				$('#footer2').click(function(){
						 $('div.items').animate({left:curval=-interval},700,'swing');
						 i=1;
						 $('div.grid').removeClass("activ");
						 $('div#next').fadeIn(700);
						 $('div#prev').fadeIn(700);
						 $('#footer2').addClass("activ");
				});	
				$('#footer3').click(function(){
						 $('div.items').animate({left:curval=-interval*2},700,'swing');
						 i=2;
						 $('div.grid').removeClass("activ");
						 $('#footer3').addClass("activ");
						 $('div#prev').fadeIn(700);
						 $('div#next').fadeOut(700);
				});	
			  				$('div.grid:not(.activ)').hover(function(){$(this).css('color','#ee4f2a')},function(){$(this).css('color','#fff')})
		
        });