/*******************************************************************************

MudSketch, version 1.0 (05/28/2008)
(c) 2008 Takashi Okamoto.

MudSketch is a JavaScript based drawing application. Donations are 
appreciated. For details, see the BuzaMoto website: http://buzamoto.com/

*******************************************************************************/

///////////////////////////////////////////////////////////////////////////////
// NAMESPACE
var com;
if (!com)
  com = {};
else if (typeof com != "object")
  throw new Error("com already exists and is not an object");

if (!com.buzamoto)
  com.buzamoto = {};
else if (typeof com.buzamoto != "object")
  throw new Error("com.buzamoto already exists and is not an object");

if (com.buzamoto.MudSketch)
  throw new Error("com.buzamoto.MudSketch already exists");

///////////////////////////////////////////////////////////////////////////////
// LOAD REQUIRED - this comes from scriptaculous loader
com.buzamoto.MudSketch = {
  Version: '1.0',
  
  require: function(libraryName) {
    // inserting via DOM fails in Safari 2.0, so brute force approach
    document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
  },
  
  load: function() {
    if((typeof Prototype=='undefined') || 
       (typeof Element == 'undefined') || 
       (typeof Element.Methods=='undefined') ||
       parseFloat(Prototype.Version.split(".")[0] + "." +
                  Prototype.Version.split(".")[1] + Prototype.Version.split(".")[2][0]) < 1.6)
       throw("com.buzamoto.MudSketch requires the Prototype JavaScript framework >= 1.6");
    
    $A(document.getElementsByTagName("script")).findAll( function(s) {
      return (s.src && s.src.match(/MudSketch\.js(\?.*)?$/))
    }).each( function(s) {
      var path = s.src.replace(/MudSketch\.js(\?.*)?$/,'');
      var includes = s.src.match(/\?.*load=([a-z,]*)/);
      (includes ? includes[1] : 'Canvas,Encoder,Decoder,Inspector,Model/Model,Model/Brush,Model/Line,Model/Point,Tool/Tool,Tool/Brush').split(',').each(
       function(include) { com.buzamoto.MudSketch.require(path+include+'.js') });
    });
  },
  
  // Calls constructor for MudSketch.Canvas()
  create: function(canvas) {
    return new com.buzamoto.MudSketch.Canvas(canvas);
  }
}

com.buzamoto.MudSketch.load();

///////////////////////////////////////////////////////////////////////////////
// CONSTANTS
com.buzamoto.MudSketch.TOOLS = {
  Brush:     0,
  Rectangle: 1,
  Circle:    2
};

com.buzamoto.MudSketch.DEFAULT_BACKGROUND_COLOR = '#fff';
com.buzamoto.MudSketch.DEFAULT_BRUSH_SIZE  = 10;
com.buzamoto.MudSketch.DEFAULT_BRUSH_COLOR = {
  red:      0,
  green:    0,
  blue:     0,
  alpha:    1
}
com.buzamoto.MudSketch.MAX_BRUSH_SIZE = 100;
com.buzamoto.MudSketch.SAVE_DISABLE_DURATION = 10000;

///////////////////////////////////////////////////////////////////////////////
// Utility Functions
com.buzamoto.MudSketch.Utility = {
  
  transform_offset: function(reference_object, position) {
    var offset = Position.cumulativeOffset(reference_object);
    return [position[0]-offset[0], position[1]-offset[1]];
  },
  
  create_status_container: function() {
    if (!$('status-wrapper')) {
      var status = this.generate_status();
      if (!$('content'))
        throw new Error("Cannot add status div since #content does not exist.");
        
      $('content').appendChild(status);

      this.draggable = new Draggable('status-wrapper', {
        handle: 'status-handle',
        starteffect: function() {},
        endeffect:   function() {}
      });
      
      Event.observe($('status-close'), 'mousedown', function(evt) {
          $('status-close').src = "/images/ui_close_down.png";
          Event.stop(evt);
      });
      Event.observe($('status-close'), 'mouseup', function(evt) {
          $('status-close').src = "/images/ui_close.png";
          Event.stop(evt);
      });
      Event.observe($('status-close'), 'mouseout', function(evt) {
          $('status-close').src = "/images/ui_close.png";
          Event.stop(evt);
      });
      Event.observe($('status-close'), 'click', function(evt) {
          com.buzamoto.MudSketch.Utility.hide_status();
      });
    }
  },
  
  generate_status: function() {
    //return com.buzamoto.MudSketch.Utility.STATUS_SNIPPET;
    var status_wrapper = document.createElement('div');
    status_wrapper.setAttribute('id', 'status-wrapper');
    status_wrapper.setStyle({position: 'absolute', display: 'none'});
    
    var status_handle = document.createElement('div');
    status_handle.addClassName('panel_handle');
    status_handle.innerHTML = '\
      <div class="panel_close"><img src="/images/ui_close.png" id="status-close" /></div>\
      <div id="status_title" class="panel_title">Status</div>\
    ';
    
    var status_content = document.createElement('div');
    status_content.setAttribute('id', 'status-content');
    status_content.addClassName('panel_content');
    
    status_wrapper.appendChild(status_handle);
    status_wrapper.appendChild(status_content);
    
    return status_wrapper;
  },
  
  status: function() {
    return this;
  },
  
  update_status: function(content) {
    $('status-content').update(content);
    this.show_status();
  },
  
  update_status_title: function(title) {
    $('status_title').update(title);
  },
  
  hide_status: function() {
    if ($('inspector-status').visible()) {
      new Effect.Fade('inspector-status', {
        duration: 0.2
      })
    }
  },
  
  show_status: function() {
    if ($('inspector-status').visible()) return;
    new Effect.Appear('inspector-status', { duration: 0.2 });
  }
  
}

com.buzamoto.MudSketch.Utility.STATUS_SNIPPET = '\
<div id="status-wrapper" style="position: absolute; display: block;">\
    <div id="status-handle" class="panel_handle">\
        <div class="panel_close"><img src="/images/ui_close.png" id="status-close" /></div>\
        <div id="status_title" class="panel_title">Status</div>\
    </div>\
    <div id="status-content" class="panel_content"></div>\
</div>\
';