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

Mastermondo application.js
(c) 2008 BuzaMoto. All rights reserved.
Author: mud(tm) - Takashi Okamoto.

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

// ----------------------------------------------------------------------------
// GLOBALS
// ----------------------------------------------------------------------------
var MAX_ZINDEX = 0;
var canvas;
var NOTE_SIZE = {width: 120, height: 80};

// ----------------------------------------------------------------------------
// Extensions
// ----------------------------------------------------------------------------

Object.extend(Draggables, {
  dragging: function() {
    for (var i = 0, len = Draggables.drags.length; i < len; ++i) {
      if (Draggables.drags[i].dragging)
        return true;
    }
    return false;
  },
  
  registered: function(element) {
    for (var i = 0, len = Draggables.drags.length; i < len; ++i) {
      if (Draggables.drags[i].element == element)
        return true;
    }
    return false;
  }
});

Position.getWindowSize = function(w) {
  var width, height;
  w = w ? w : window;
  width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
  height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
  return { width: width, height: height };
}


// ----------------------------------------------------------------------------
// UTILITIES
// ----------------------------------------------------------------------------
function popupModule(module, x, y) {
  x = (x) ? x : 0;
  y = (y) ? y : 0;
  new Effect.Parallel([
    new Effect.Move(module, { sync: true, x: x, y: y, mode: 'absolute' }), 
    new Effect.Appear(module, { sync: true })
  ], { duration: 0.25 });
}

function initModule(module, x, y) {
  x = (x) ? x : 0;
  y = (y) ? y : -200;
  module.setStyle({left: x+'px', top: y+'px'});
  
  var moduleHandle = module.down(".header");
  
  // set handle to selected on mouse over
  module.observe('mouseover', function(e) {
    if (!Draggables.dragging()) {
      module.addClassName('shadow');
      module.addClassName('selected');
    }
    Event.stop(e);
  });
  
  // remove selected from handle on mouse out
  module.observe('mouseout', function(e) {
    if (!Draggables.dragging()) {
      module.removeClassName('shadow');
      module.removeClassName('selected');
    }
    Event.stop(e);
  });
  
  // set close button
  if (module.down(".close")) {
    Event.observe(module.down(".close"), 'click', function(e) {
      var elt = $(Event.element(e)).up('.module');
      elt.fade({duration: 0.2});
      Event.stop(e);
    });
  }
  
  // set module to draggable
  Event.observe(module, 'click', function(e) {
    var elt = $(Event.element(e));
    if (elt.tagName.toUpperCase() != 'A')
      module.setStyle({zIndex: ++MAX_ZINDEX});
  });
  new Draggable(module, {
    zindex: 1000,
    beforeeffect: function(element) {
      element.setStyle({zIndex: ++MAX_ZINDEX});
    },
    starteffect: function(element) {},
    endeffect: function(element) {}
  });
}

function initAndPopupModule(module, event, offsetX, offsetY) {
  offsetX = (offsetX) ? offsetX : 0;
  offsetY = (offsetY) ? offsetY : 0;
  var x = Event.pointerX(event) + offsetX;
  var y = Event.pointerY(event) + offsetY;
  if (!Draggables.registered(module))
    initModule(module, x, y);
  popupModule(module, x, y);
}

function showSpeakerBio(speaker, event) {
  $('speaker_bio-content').update(SPEAKER_BIO[speaker]);
  initAndPopupModule($('speaker_bio'), event, 30, 0);
}

function showInspector(event) {
  $('inspector-wrapper').setStyle({visibility: 'visible'});
  initAndPopupModule($('inspector-wrapper'), event, -200, -($('inspector-wrapper').getHeight() + 40));
}

function initDrawing() {
  new Effect.SlideDown('drawing-wrapper', {
    duration: 0.25,
    afterFinish: function() {
      if (!canvas)
        canvas = com.buzamoto.MudSketch.create('drawing');
      if (!$('inspector-wrapper').visible())
        initModule($('inspector-wrapper'));
      new Effect.SlideUp('contribution-about', {
        duration: 0.25
      })
    }
  });
}

function cancelDrawing() {
  new Effect.SlideUp('drawing-wrapper', {
    duration: 0.25,
    afterFinish: function() {
      if ($('inspector-wrapper').visible())
        new Effect.Fade('inspector-wrapper', {duration: 0.2});
      new Effect.SlideDown('contribution-about', {
        duration: 0.25
      })
    }
  });
}

function initAndDisplayNote(note, brandNew) {
  var module = constructNote(note);
  document.body.appendChild(module);
  var windowSize = Position.getWindowSize();
  initModule(module, windowSize.width/2.0, -NOTE_SIZE.height);
  var x = (Math.random()-.5)*(windowSize.width-NOTE_SIZE.width) + windowSize.width/2.0 - NOTE_SIZE.width/2.0;
  var y;
  y = (brandNew) ? Math.random()*150 : Math.random()*$('content').getHeight() - NOTE_SIZE.height;
  new Effect.Move(module, { x: x, y: y, mode: 'absolute', duration: 0.2 });
}

function constructNote(note) {
  var windowSize = Position.getWindowSize();
  var module = document.createElement('div');
  Element.extend(module);
  module.id = 'note_' + note.id;
  module.addClassName('module')
  module.addClassName('note');
  module.setStyle({position: 'absolute', width: NOTE_SIZE.width + 'px', top: NOTE_SIZE.height + 'px', left: windowSize.width/2.0 + 'px'});
  
  var divHeader = document.createElement('div');
  Element.extend(divHeader);
  divHeader.addClassName('header');
  divHeader.update('<ul class="controls"><li><a href="#" class="close" title="close" style="margin-top: -4px;">x</a></li></ul>');
  module.appendChild(divHeader);
  
  var divContent = document.createElement('div');
  Element.extend(divContent);
  divContent.addClassName('content');
  var imgTag = '<img src="/notes/' + note.id + '/' + note.id + '-' + NOTE_SIZE.width + 'x' + NOTE_SIZE.height + '.png" />';
  if (note.text) imgTag += '<div class="note_text">' + note.text + '</div>';
  divContent.update(imgTag);
  
  module.appendChild(divContent);
  
  return module;
}

function turnOffNotes(event) {
  $$(".note").each(function(module) { module.hide(); });
  var element = Event.element(event);
  element.update("Notes On");
  element.onclick = turnOnNotes;
}

function turnOnNotes(event) {
  $$(".note").each(function(module) { module.show(); });
  var element = Event.element(event);
  element.update("Notes Off");
  element.onclick = turnOffNotes;
}