var FBF = window.FBF||{};

/* Example singleton pattern */

/*
FBF.ExampleSingleton = function() {
  var element, myVar1, myVar2, etc;
  
  function myMethod(){
    
  }
  
  return {
    initialize : function(el){
      element = $(el);
    }
  }
  
}();
*/

history.navigationMode = 'compatible';

FBF.Agency = function(){
  var animation, current, element, fade, next, _next, popup;
  var animating = false;
  var hide = false;
  var visible = false;

  function onmouseover(e){

    var element = Event.findElement(e, 'li');

    var offset = element.cumulativeOffset();

    var trigger = element.down('img');
    var link = element.down('a');

    if(!visible){
      current.src = trigger.src.replace('.png', '_large.png');
      if(link){
        current.onclick = function(){
          window.location=link.href; return false;
        };
      }
      visible = true;
      popup.setStyle({
        'left' : offset.left+"px",
        'opacity': 0
      });
      popup.show();
      new Effect.Opacity(popup, {
        from: 0,
        to: 1,
        duration: 1,
        afterFinish : function(){
          visible = true;
        }
      });
    }else{
      next.src = trigger.src.replace('.png', '_large.png');
      if(link){
        current.onclick = function(){
          window.location=link.href; return false;
        };
      }
      if(hide){
         window.clearTimeout(hide);
      }
      if(!animating){
        animating = true;
        animation = new Effect.Move(popup, {
          x: offset.left,
          y: 160,
          mode: 'absolute',
          duration: 1,
          afterFinish : function(){
            animating = false;
            visible = true;
          }
        });
        _next = next.src;
        fade = new Effect.Opacity(current, {
          from: 1,
          to: 0,
          duration: 1,
          afterFinish : function(){
            current.src = next.src;
            current.setStyle({
              opacity: 1
            });
          }
        });
      }else{
        animation.cancel();
        animation = new Effect.Move(popup, {
          x: offset.left,
          y: 160,
          mode: 'absolute',
          duration: 1,
          afterFinish : function(){
            animating = false;
            visible = true;
          }
        });
        fade.cancel();
        var opacity = current.getOpacity();
        fade = new Effect.Opacity(current, {
          from: opacity,
          to: 0,
          duration: 1,
          afterFinish : function(){
            current.src = next.src;
            current.setStyle({
              opacity: 1
            });
          }
        });
      }
    }
  }

  function onmouseout(e){
    var element = Event.element(e);
    if(element.id!='popup'){
      if(visible){
        hide = function(){
          new Effect.Opacity(popup, {
            from: 1,
            to: 0,
            duration: 1,
            afterFinish : function(){
              //animating = false;
              visible = false;
              popup.hide();
            }
          });
        }.delay(1);
      }
    }
  }

  return {
    initialize : function(){
      current = $('current');
      element = $('our_agencies').down('.clip');
      next = $('next');
      popup = $('popup');

      element.observe('mouseover', onmouseover);
      popup.observe('mouseout', onmouseout);

    }
  }
}();

document.observe("dom:loaded", function(){
  // Stuff to run once the DOM has loaded goes in here...
  
  // FBF.ExampleSingleton.initialize('myElement');
  FBF.Agency.initialize();
});