// Fadeout time and delay in ms
var fadeout_time = 500;
var fadeout_delay = 1000;

var bars = null
var infoboxes = null;
var mousepos = {'x':0, 'y':0};

function show_infobox(obj, num)
{
  var infobox = $('infobox'+num);
  if(!infobox) return;

  var opacitystate = infobox.getStyle('opacity');

  // hide all other infoboxes
  infoboxes.each(function(box) {
    box.setStyles({'visibility':'hidden', 'opacity':0});
    $clear(box.retrieve('delayedFader')); // clear delay on function
    box.retrieve('Fader').cancel(); // cancel effect
  });

  // infobox position, if not yet visible
  if(opacitystate==0)
  {
    var infosize = infobox.getSize();
    infobox.setStyles({'left':-15+mousepos.x+'px', 'top':-15+mousepos.y-infosize.y+'px'});
  }

  // show new infobox
  infobox.setStyles({'visibility':'visible', 'opacity':1});
}

function bar_hover(obj, num)
{
  obj.addClass('bar-hover');
}

function bar_out(obj, num)
{
  obj.removeClass('bar-hover');
  var infobox = $('infobox'+num);
  if(!infobox) return;
  var fader = infobox.retrieve('Fader');
  var delayed_fader = fader.start.delay(fadeout_delay, fader, {'opacity':0});
  infobox.store('delayedFader', delayed_fader);
}

// inject hover functionality
function prepare_chart()
{
  var count = 1;
  bars.each(function(bar)
  {
    bar.addEvent('mouseover', function() {bar_hover(arguments[0], arguments[1]);}.pass([bar, count]));
    bar.addEvent('mouseover', function() {show_infobox(arguments[0], arguments[1]);}.pass([bar, count]));
    bar.addEvent('mouseout', function() {bar_out(arguments[0], arguments[1]);}.pass([bar, count]));
    count++;
  });
}

// IE compatibility and fade effect
function prepare_infoboxes()
{
  var body = $$('body')[0];
  infoboxes.each(function(infobox)
  {
    // move infobox to body-tag, to avoid positioning problems in IE
    body.grab(infobox);
    
    // fade-effect
    var fader = new Fx.Morph(infobox,
      {
        'duration': fadeout_time,
        'fps': 30,
        'link': 'cancel',
        'transition': Fx.Transitions.Quad.easeInOut
      });
    infobox.store('Fader', fader);
    infobox.store('delayedFader', function(){});
    infobox.setStyle('opacity', 0);
    
    infobox.addEvent('mouseover', function()
    {
      $clear(infobox.retrieve('delayedFader')); // clear delay on function
      infobox.retrieve('Fader').cancel(); // cancel effect
    });
    
    infobox.addEvent('mouseout', function()
    {
      var delayed_fader = fader.start.delay(fadeout_delay, fader, {'opacity':0});
      infobox.store('delayedFader', delayed_fader);
    });
  });
}

// get mouseposition on mouse movement
function getMousePosition(e)
{
  if(e == undefined) e = window.event;
  if(e.pageX || e.pageY)
  {
    mousepos.x = e.pageX;
    mousepos.y = e.pageY;
  }
  else if(e.clientX || e.clientY)
  {
    mousepos.x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    mousepos.y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  }
}

// prepare dynamic chart functionality
window.addEvent('domready', function()
{
	  bars = $$('.chart .bar');
	  infoboxes = $$('.infobox');
	  if(bars.length>0) prepare_chart();
	  if(infoboxes.length>0) prepare_infoboxes();
	});

function chartbarsstart()
{
  bars = $$('.chart .bar');
  infoboxes = $$('.infobox');
  if(bars.length>0) prepare_chart();
  if(infoboxes.length>0) prepare_infoboxes();
}

// register callback for mouse position
document.onmousemove = getMousePosition;