/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

$(document).ready(function() {

var  iDivDebugWidth = $('#btnShowDebug').outerWidth()+$('#divDebugMenu').outerWidth();

$('#divDebug').width(iDivDebugWidth);

$('#divDebugContent').width($('#divDebugMenu').outerWidth());

$('#divDebug').css('right',-1*iDivDebugWidth+$('#btnShowDebug').outerWidth());


$('#divDebugContent div').each(function(){
    $(this).hide();
});

$('#btnShowDebug').click(function(){
  
   var isActive = $(this).hasClass('active');
   var iDivDebugWidth = $("#divDebug").width()-$(this).outerWidth();
   if(isActive){
       
        $( "#divDebug" ).animate({ "right": "-="+iDivDebugWidth+"px" }, "fast" );

       
   }else{
       
         $( "#divDebug" ).animate({ "right": "+="+iDivDebugWidth+"px" }, "fast" );

   }
   

});

$('#divDebugMenu button').click(function(){
    
    
   $('#divDebugContent div').each(function(){
    $(this).hide();
   }); 
    
   $($(this).attr('data-content')).show();

});

});