var ImageComment = Class.create();
ImageComment.prototype = {
   initialize: function(box) {
      var body            = $$('body')[0];

      var image_id        = box.getAttribute('for');
      var image           = $(image_id);
      var image_dimension = image.getDimensions();
      var img_height      = image_dimension.height
      var x_scale         = image_dimension.width / box.getAttribute('width');
      var y_scale         = img_height / box.getAttribute('height');
      var image_position  = Position.cumulativeOffset(image);

      this.event_show = this.show_comment.bindAsEventListener(this);
      this.event_move = this.move_comment.bindAsEventListener(this);
      this.event_hide = this.hide_comment.bindAsEventListener(this);

      var comments    = $A();

      var my_this = this;
      $A(box.getElementsByTagName('div')).each(function(comment, idx) {
         var style    = comment.style;
         var top      = Math.round(parseInt(style.top)    * y_scale);
         var left     = Math.round(parseInt(style.left)   * x_scale);

         style.top    = image_position[1]+top  + 'px';
         style.left   = image_position[0]+left + 'px';
         style.width  = Math.round(parseInt(style.width)  * x_scale) + 'px';
         style.height = Math.round(parseInt(style.height) * y_scale) + 'px';


         var title_attr = comment.getAttribute('title');
         var text       = Builder.node(
            'p',
            {id: image_id+'_'+idx+'_text', className: 'olefa-comment'},
            title_attr == '' ? '[no comment]' : title_attr
         );
         $(text).setOpacity(0.8);

         comment.id = image_id+'_'+idx;
         comment.removeAttribute('title');
         //comment.hide();
         body.appendChild(comment);
         comments.push(text);

         Event.observe(comment, 'mouseover', my_this.event_show);
         Event.observe(comment, 'mousemove', my_this.event_move);
         Event.observe(comment, 'mouseout',  my_this.event_hide);
      });

      comments.each(function(text) {body.appendChild(text)});

      box.remove();

      Event.observe(image, 'mouseover', function(ev) {
         var i = 0;
         var comment;
         while (comment = $(image_id+'_'+i)) { comment.show(); i++; }
      });
      Event.observe(image, 'mouseout', function(ev) {
         var i = 0;
         var comment;
         while (comment = $(image_id+'_'+i)) { comment.hide(); i++; }
      });
   },

   show_comment: function(ev) {
      Event.stop(ev);
      var t = $(Event.element(ev).id+'_text');
      if (t) {
         t.style.left    = Event.pointerX(ev)+5+'px';
         t.style.top     = Event.pointerY(ev)+5+'px';
         t.style.display = 'block';
      }
      Event.element(ev).style.display = '';
   },

   move_comment: function(ev) {
      Event.stop(ev);
      var t = $(Event.element(ev).id+'_text');
      if (t) {
         t.style.left = Event.pointerX(ev)+5+'px';
         t.style.top  = Event.pointerY(ev)+5+'px';
      }
   },

   hide_comment:  function(ev) {
      Event.stop(ev);
      var t = $(Event.element(ev).id+'_text');
      if (t) { t.style.display = 'none'; }
   }
}

Event.observe(window, 'load', function() {
   $$('div.olefa_imagebox_hidden').each(function(item) {
      new ImageComment(item);
   });
});