<html>
<head>
<title></title>
<script src="jquery.min.js"></script>
<style>

   body{
   font-family:sans-serif;
   padding:0;
   margin:0;
   
   }
   
   #header{ 
       width:100%;
	   background-color: #ffef96; 
	   padding:5px;
	   height:35px;
   
   }
   
   #logo{
   float:left;
   font-weight:bold;
   font-size:120%;
   padding:3px;
   padding:3px 5px;
   
   }
   
   #buttonContainer{
       width:300px;
	   margin:0 auto;
   
   
   
   }
   
   .toggleButton{
   
          float:left;
		  border:1px solid grey;
		  padding:5px;
		  
   }

  .active{
  background-color:#E8F2FF;
  
  }
  
  .highlightedButton{
     
	 background-color:grey;
  
  }
  
  textarea{
  
  resize:none;
  border-top:none;
  border-color:grey;

  }
  
  .panel{
     float:left;
	 width:50%;
	 border-left:none;
  
  }
  iframe{
  
  border:none;
  }
  
  .hidden{
  
  display:none;
  }



</style>

</head>

<body>


   <div id="header">
       <div id="logo">
           Codeplayer
       </div>
	   
	   <div id="buttonContainer">
	      <div class="toggleButton active" id="html">HTML</div>
		  <div class="toggleButton" id="css">CSS</div>
		  <div class="toggleButton" id="javascript">JAVASCRIPT</div>
		  <div class="toggleButton active" id="output">OUTPUT</div>
		  
	   </div>	  
  
  </div>
  
  <div id="bodyContainer">
    <textarea id="htmlPanel" class="panel"><p id="para">Hello World</p></textarea>
	<textarea id="cssPanel" class="panel hidden">p {color:green}</textarea>
	<textarea id="javascriptPanel" class="panel hidden">document.getElementById("para").innerHTML="hello there";</textarea>
    <iframe id="outputPanel" class="panel"></iframe>
  

<script type="text/javascript">


function updateOutput(){
$("iframe").contents().find("html").html("<html><head><style type='text/css'>"+$("#cssPanel").val()+"</style></head><body>"+
	 
	 $("#htmlPanel").val() + "</body></html>");
	 
	 
	 document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val());
	 

}
   $(".toggleButton").hover(function(){
        $(this).addClass("highlightedButton");
    
     },
	 function(){
	 $(this).removeClass("highlightedButton");
	 
	 });
	 
	 $(".toggleButton").click(function(){
	 
	       $(this).toggleClass("active");
	       
		   $(this).removeClass("highlightedButton");
		   
		   var panelId=$(this).attr("id")+"Panel";
		   $("#"+panelId).toggleClass("hidden"); 

           var numberOfActivePanels=4-$('.hidden').length;
            $(".panel").width(($(window).width()/numberOfActivePanels)-10);

		   
     });
	 
	 $(".panel").height($(window).height()-$("#header").height()-10);
     $(".panel").width(($(window).width()/2)-15);
     
	 $("iframe").contents().find("html").html($("#htmlPanel").val());
	 
	 updateOutput();
	 
	 $("textarea").on('change keyup paste',function(){
	   updateOutput();

   });
</script>
  
</body>
</html>
