/**
 * Tool tip, alert boxes.  A work in progress.
 *
 *  eg: feedback.warn_box.show('oh no! error!') (global feedback var is introduced.)
 *      $(...).toolTip("I'm a helpful hint!");
 *   
 *   include jquery.corners.js to get round corners on your tooltips
use a style something like this:
.tool-tip 
{
          padding:6px;
          background-color: #22857f; 
          color: white; 
          border:solid 1px #FFFFFF; 
          font-size:small;
          text-align: center;
}
 */ 
var toolTip = {
          className: "tool-tip",
          cornerRadius: 2,
          align:"left",
          orient: "above",
          width: 100,
          borderWidth:0,
          arrowHeight: 7,
          showCallback: function(settings) {if(settings.borderBox) settings.borderBox.fadeIn('fast');$(this).fadeIn('fast')}
};
$.fn.toolTip = function(msg,options) {
  options = options || {};
  var timeout = options['timeout'] || 0;
  this.hover(
    function() {
      $(this).data('tool-tip',true);
      setTimeout( 
        (function($sel) {
          return function() {
            if($sel.data('tool-tip')) {  $sel.callout($.extend({}, toolTip,options,{'text':msg})); }
          };
        })($(this)), timeout
      );
    },
    function() {
      $(this).data('tool-tip',false)
             .closeCallout();
    }
  );
}

function Alerter(options) {
 var settings = {style: {
                      position:'absolute', top: 0, right: 0,
                      opacity:0
                      }, // id is also all
                 width:0, height:0, /* 0 means auto-size */ place: 'ul', goodpic : '/img/yes.png', badpic : '/img/no.png', id:null, clspfx : 'ab', minTime:1000} //clspfx: class prefix (eg: ab-box, ab-text, ab-icon)

 if(options!=undefined)
   $.extend(true, settings, options);

  var pfx = settings.clspfx;
  var id = settings.id ? ' id="'+settings.id+"'" : '';
  $msgbox = $('<div'+id+' class="alerter-box '+pfx+'-box"><span class="'+pfx+'-icon"></span><span style="margin-left:10px" class="'+pfx+'-text feedback-text"></span></div>').css(settings.style)
  $('body').append( $msgbox);


  var id = '#' + settings.id;
  $msgtext = $msgbox.find('.'+pfx+'-text');
  $msgicon = $msgbox.find('.'+pfx+'-icon');

  /*
  $(window).scroll(function() {
    $msgbox.css({'top':$(window).scrollTop()});  
  });
  */

  var hide_ok = false; // co-ord. min show time w/ mouse move hide event
  var shown = false; // 

  // The public object
  var obj = (function(settings, $msgbox, $msgtext, $msgicon) {
    return {
      show : function(message, good) {
        if(shown) return;
        if(good==undefined) good = true;

        var pic = good ? settings.goodpic : settings.badpic;
        $msgicon.html('<img align=top src="'+pic+'" height="30px" width="30px"/>');

        $msgtext.html(message);

        hide_ok = false;
        shown = true;

        var style;
        switch(settings.place) {
          case('ul'):
            style = {top:$(window).scrollTop(), right:0};
            break;
          case('mid'):
            style = {top:$(window).height()/2, right:0};
            break;
          // TODO: leaving off here for today...


        }
        
        $msgbox
             .css(style)
             .fadeTo('slow', 1, function() {
                setTimeout(function() {hide_ok = true}, settings.minTime);
             });
        console.log($msgbox);
      },
      // hide if min time has elapsed
      requestHide : function() {
        if(shown && hide_ok) this.hide();
      },
      hide: function() {
        if(shown) {
          hide_ok = false; // only do this once
          $msgbox.fadeTo('slow', 0, function() {shown=false});
        }
      }
    }
  })(settings, $msgbox, $msgtext, $msgicon);

  $('body').mousemove(function() {
    obj.requestHide();
  });

  return obj;
}

var feedback;

$(function() {

feedback  =  {
  warn_box: new Alerter({clspfx:'warning'}),
  notice_box : new Alerter({clspfx:'notice'})
}

});