var active_avatar = "small";
  
  var small_width = 50;
  var large_width = 100;
  
  var avatar_src_w = 0;
  var avatar_src_h = 0;
  
  changeAvatarSelection(active_avatar);

	// Remember to invoke within jQuery(window).load(...)
	// If you don't, Jcrop may not initialize properly
	// setSelect: [(avatar_src_w/2), (small_width / 2), avatar_src_h, (small_width / 2) ],

	//jQuery(window).load(function(){
	jQuery(document).ready(function(){
	
	// Only process this stuff if the cropper is here
	if(document.getElementById('cropbox'))
	{
	
	   avatar_src_w = jQuery("#avatar_src_w").val();
     avatar_src_h = jQuery("#avatar_src_h").val();
     
	  var jcrop_api = $.Jcrop('#cropbox',{
	    onChange: showPreview,
	    onSelect: updateAvatarCropCoords,
	    setSelect: [Math.round((avatar_src_w/2) - (small_width/2)), Math.round((avatar_src_h/2) - (small_width/2)), Math.round((small_width + (avatar_src_w/2))), Math.round((small_width + (avatar_src_h/2))) ],
	    aspectRatio: 1
	  });
	
	 // Take action when they select to full-size avatar preview
	 jQuery('#preview_lg').click(function() {
	    changeAvatarSelection("large");
	    
	    jcrop_api.setSelect([jQuery("#largex1").val(), jQuery("#largey1").val(), jQuery("#largex2").val(), jQuery("#largey2").val()]);
	    
	   });
	   
	 // Take action when they select to thumbnail avatar preview
   jQuery('#preview_sm').click(function() {
      changeAvatarSelection("small");
      
      jcrop_api.setSelect([jQuery("#smallx1").val(), jQuery("#smally1").val(), jQuery("#smallx2").val(), jQuery("#smally2").val()]);
     });
     
   }
	   
	});
	
	// Our simple event handler, called from onChange and onSelect
	// event handlers, as per the Jcrop invocation above
	function showPreview(coords)
	{
	  if (parseInt(coords.w) > 0)
	  {
	    if( active_avatar == "small" )
	    {
	      var rx = small_width / coords.w;
        var ry = small_width / coords.h;
        
		    jQuery('#preview_sm').css({
		      width: Math.round(rx * avatar_src_w) + 'px',
		      height: Math.round(ry * avatar_src_h) + 'px',
		      marginLeft: '-' + Math.round(rx * coords.x) + 'px',
		      marginTop: '-' + Math.round(ry * coords.y) + 'px'
		    });
      }
      else
      {
	      var rx = large_width / coords.w;
	      var ry = large_width / coords.h;
      
        jQuery('#preview_lg').css({
          width: Math.round(rx * avatar_src_w) + 'px',
          height: Math.round(ry * avatar_src_h) + 'px',
          marginLeft: '-' + Math.round(rx * coords.x) + 'px',
          marginTop: '-' + Math.round(ry * coords.y) + 'px'
        });
      }
      
	  }
	}
	
	// Update our vars for the cropping
	function updateAvatarCropCoords(coords)
	{
		 // Update the preview first
		 showPreview(coords);
		 
	   // Now update the global variables
	   if( active_avatar == "small" )
	   {
	     jQuery("#smallx1").val(coords.x);
       jQuery("#smallx2").val(coords.x + coords.w);
       jQuery("#smally1").val(coords.y);
       jQuery("#smally2").val(coords.y + coords.h);

     }
     else
     {
       jQuery("#largex1").val(coords.x);
       jQuery("#largex2").val(coords.x + coords.w);
       jQuery("#largey1").val(coords.y);
       jQuery("#largey2").val(coords.y + coords.h);

     }
     
     
	}
	
	// Change which is the "active" avatar preview
	function changeAvatarSelection(largeOrSmall)
	{
	   if( largeOrSmall == "small" )
	   {
        jQuery("#thumbnail_box").addClass("selected_preview");
				jQuery("#avatar_box").removeClass("selected_preview");
        active_avatar = "small";
      
	   }
	   else
	   {
				jQuery("#thumbnail_box").removeClass("selected_preview");
				jQuery("#avatar_box").addClass("selected_preview");
				active_avatar = "large";
	   }

 }
 
 
  // Validate avatar selections, then save!
  function saveAvatarSelections()
  {
    //jQuery("#avatarForm").submit();
  }