jQuery.fn.outerHTML = function() {
    return $('<div>').append( this.eq(0).clone() ).html();
};

var controlsClicked=false;

jQuery(function() {
   
   // Background selector
   $("#background li").click(function() {
      document.body.className = this.className;
   });
   
   // Add links to image tag labels
   $(".demo p").each(function() { 
      a = document.createElement("a"); 
      a.href = 'interactive.php?s='+$(this).html().replace('&lt;', '<').replace('&gt;', '>'); 
      $(this).wrapInner(a);
   });
      
   // Interactive sampler loader
   $("form").submit(function() {
      $("#controls").hide("fast");
      $('#controls-reveal').attr('class', '');
      $("#content").load("interactive-ajax.php?s="+escape($("#input").val()));
      return false;
   });
   
   // Sampler image switcher
   $("#switcher li").click(function() {
      $("#input").val($("#input").val().replace(/src="[^"]+"/, 'src="Samples/'+this.className+'.jpg"'));
      $("form").submit();
   });
   
   // Set width of interactive sampler drop-down
   $('#controls').css('width', $('#input').width());
   
   // Selected a button on the drop-down
   $('#controls input').click(function() {
      controlsClicked = true;
      
      if ( this.className == 'radio-checkbox' && this.checked ) {
         // Clicked a non-value checkbox - ignore
         return false;
      }
      
      if ( this.checked ) {
            // Move up through tree and make sure 'parent' (a prior sibling of the parent container) checkboxes are selected
            elt = this;
            i=0;
            while ( (elt = $(elt).parents('[class]').eq(0).prev().find('input').andSelf().filter('input')).size() > 0 ) elt.attr('checked', true);
      } else {
         // Move down through the three and de-select all checkboxes
         $(this).parents(':not(.main-class)').eq(0).find('input').attr('checked', false);
      }
      
      setClasses();
      
      return true;
   });
   
   // Show controls when we focus the text box
   $('#input').focus(function() {
      $('#controls').show("fast");
      $('#controls-reveal').attr('class', 'hide');
   });
   // Hide when we defocus (unless we're in controls)
   $('#input').blur(function() {
      controlsClicked = false;
      setTimeout(function() {
         if ( controlsClicked ) {
            controlsClicked = false;
            return;
         }
         $('#controls').hide("fast");
         $('#controls-reveal').attr('class', '');
      }, 100);
   });
   $('#controls').click(function() {
      controlsClicked = true;
   });
   
   // Enable controls sorting
   $('#controls').sortable({
      start: function() { controlsClicked=true; },
      update: function() { setClasses(); }
   });
   
   // Show/hide sampler drop-down
   $('#controls-reveal').click(function() {
      $('#controls').toggle("fast");
      this.className = ( this.className == '' ? 'hide' : '');
   })
});

function setClasses() {
   var classes = '';
   $('#controls .style input:checked').each(function() {
      if ( this.value != 'on' && classes.indexOf(this.value) == -1 ) classes += ' '+this.value;
   });
   classes = classes.replace(/^\s+/, '').replace(/\s+$/, '');
   
   var input = $("#input");
   if ( input.val().indexOf('class=') != -1 ) {
      input.val(input.val().replace(/class="[^"]*"/, 'class="'+classes+'"'));
   } else {
      input.val('<img src="Samples/boathouse.jpg class="'+classes+'" />"');
   }
   
   $('#input').focus();
}