$(function () {
  //SCREW IE
  if( $.browser.msie && $.browser.version <= 6 )
	return;
  $('.comp_thumb, .comp_index').each(function () {
	// options
    var distance = 10;
    var time = 150;
    var gtime = 150;
    var hideDelay = 0;

    var hideDelayTimer = 1;

    // tracker
    var beingShown = false;
    var shown = false;

    var usageNew = $('#usage_new').get(0);
     
    var trigger = $('a', this);
    var popup = $('.usage', this).css('opacity', 0);
    //alert($(this).position().left);
    //have to resize arrow in code for IE?
    var arrow = $('.usage .arrow img', this);
    var start = $('.usage .start',this).attr('value');
    var width = $('.usage .width',this).attr('value');

    var graphL = $('.usage .graph_l', this);
    var graphLImg = $('.usage .graph_l img', this);
    graphLImg.css('width',50+'px');
    
    var graphM = $('.usage .graph_m', this);
    var graphR = $('.usage .graph_r', this);
    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).hoverIntent(function () {

      //var comp_thumb = $(this).parent().get(0).className;
    
      // stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // don't trigger the animation again if we're being shown, or already visible
      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;
        // reset position of popup box
        popup.css({
          display: 'block' // brings the popup back in to view,
        })
        .animate({
          //top: '+=' + distance + 'px',
          'opacity': 1
        }, time, 'linear', function() {
          // once the animation is complete, set the tracker variables
          beingShown = false;
          shown = true;
        });
        graphM.css({"marginLeft":start+"px",'visibility':'visible',"width":0})
			.animate({width:width,marginLeft:'-='+(width/2)},gtime, 'linear');
        graphL.css({'marginLeft':(start-50) + 'px','visibility':'visible'})
			.animate({marginLeft:'-='+(width/2)},gtime, 'linear');
        graphR.css({'marginLeft':start + 'px','visibility':'visible'})
			.animate({marginLeft:'+='+(width/2)}, gtime, 'linear');

      }
    },
    function () {
      // reset the timer if we get fired again - avoids double animations
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // store the timer so that it can be cleared in the mouseover if required
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        graphL.css('visibility','hidden');
        graphM.css('visibility','hidden');
        graphR.css('visibility','hidden');
		
	graphM.css('marginLeft',start + 'px');
        graphM.css('width',0);
        graphL.css('marginLeft',(start-50) + 'px');
        graphR.css('marginLeft',start + 'px');

	popup.animate({
         // top: '-=' + distance + 'px',
          opacity: 0
        }, time, 'linear', function () {
          // once the animate is complete, set the tracker variables
          shown = false;
          // hide the popup entirely after the effect (opacity alone doesn't do the job)
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });
});