Type.registerNamespace('epsilon');

epsilon.AvatarIcon = function(element) {
   epsilon.AvatarIcon.initializeBase(this, [element]);

   this._avatarMouseOver = 0;
   this._hoverMenuShowing = 0; 
   
   this._hoverMenuButtonHandler = null;
   this._hoverMenuMouseOverHandler = null;
   this._iconMouseOverHandler = null;
   this._hoverMenuMouseOutHandler = null;
   this._scrollHandler = null;
   this._resizeHandler = null;
   this._hoverOutTickHandler = null;
   this._documentMouseDownHandler = null;
   
   this._hoverCurrImg = null;
   this._hoverHideTimer = null;
   this._hoverHideTimerInterval = 500;
   this._avatarCache = { };
   
}

epsilon.AvatarIcon.prototype = {
   
   dispose: function() {
      
      if(this._documentMouseDownHandler) {
         $removeHandler(document, 'mousedown', this._documentMouseDownHandler);
         this._documentMouseDownHandler = null;
      }
      
      if (this._scrollHandler) {
         $removeHandler(window, 'scroll', this._scrollHandler);
         this._scrollHandler = null;
      }
      if (this._resizeHandler) {
         $removeHandler(window, 'resize', this._resizeHandler);
         this._resizeHandler = null;
      }
  
      var el = document.getElementsByTagName('img');
      for(var i=0; i<el.length; i++){
         if (el[i].className == 'xAvatarIcon') {
            $removeHandler(el[i], 'mouseover', this._iconMouseOverHandler);
         }
      }

      $removeHandler($get('avatarMenuButton'), 'click', this._hoverMenuButtonHandler);
      $removeHandler(this.get_element(), 'mouseout', this._hoverMenuMouseOutHandler);
      $removeHandler(this.get_element(), 'mouseover', this._hoverMenuMouseOverHandler);
      
      this._hoverMenuMouseOverHandler = null;
      this._hoverMenuMouseOutHandler = null;     
      this._hoverMenuButtonHandler = null;
      
      if (this._hoverHideTimer) {
         this._hoverHideTimer.remove_tick(this._hoverOutTickHandler);
         this._hoverHideTimer.dispose();
         this._hoverHideTimer = null;
      }
      
      this._hoverOutTickHandler = null;
      this._iconMouseOverHandler = null;
      this._hoverMenuMouseOutHandler = null;
      this._avatarHoverMenu = null;
            
      epsilon.AvatarIcon.callBaseMethod(this, 'dispose');
   },
   
    initialize: function() {
      var el = this.get_element();
      
      this._hoverOutTickHandler = Function.createDelegate(this, this._onHoverOutTick);
        
      this._hoverHideTimer = new epsilon.Timer();
      this._hoverHideTimer.add_tick(this._hoverOutTickHandler);
      this._hoverHideTimer.set_interval(this._hoverHideTimerInterval);
      this._hoverHideTimer.set_enabled(false);
           
      this._iconMouseOverHandler = Function.createDelegate(this, this._onIconMouseOver);
      
      this._hoverMenuMouseOverHandler = Function.createDelegate(this, this._onHoverMenuMouseOver);
      this._hoverMenuMouseOutHandler = Function.createDelegate(this, this._onHoverMenuMouseOut);     
      this._hoverMenuButtonHandler = Function.createDelegate(this, this._onHoverMenuButton);
      
      $addHandler(el, 'mouseover', this._hoverMenuMouseOverHandler);
      $addHandler(el, 'mouseout', this._hoverMenuMouseOutHandler);
      $addHandler($get('avatarMenuButton'), 'click', this._hoverMenuButtonHandler);
      
      var el = document.getElementsByTagName('img');
      for(var i=0; i<el.length; i++){
         this._avatarMenuProcessImg(el[i]);
      }
      
      epsilon.AvatarIcon.callBaseMethod(this, 'initialize');
   },
   
   _avatarMenuProcessImg : function(img) {
      var avatarIcon = function(el) {
         if(el.className == 'xAvatarIcon') {
            return true;
         }
         return false;
      }
      
      if(avatarIcon(img)) {
         this._hoverAddImg(img);
         $addHandler(img, 'mouseover', this._iconMouseOverHandler);
      }
   },
   
   _hoverAddImg : function(img) {
      if (!img.id) {
         alert('avatar ERROR: image id was not set.');
      }
      
      var avatarId = img.src.split("?")[1];
      var id = 'hoverImg' + avatarId;
      img.avid = avatarId;
      if($get(id)){
         return;
      }
      var hoverImg = document.createElement('img');
      hoverImg.id = id;
      hoverImg.avid = avatarId;
      hoverImg.src = img.src;
      hoverImg.className = 'avatarHoverImg';
      $get('avatarHoverLink').appendChild(hoverImg);
   },

   _hoverHide : function() {
      var hoverPrevImg = 'hoverImg' + this._hoverCurrImg.avid;
      $get(hoverPrevImg).style.display = 'none';
      $get('avatarHover').style.display = 'none';
      this._detachHover();
   },
   
   _attachHover : function() {
      this._scrollHandler = Function.createDelegate(this, this._onLayout);
      $addHandler(window, 'scroll', this._scrollHandler);
      
      this._resizeHandler = Function.createDelegate(this, this._onLayout);
      $addHandler(window, 'resize', this._resizeHandler);
   },
   
   _detachHover : function() {
      if (this._scrollHandler) {
         $removeHandler(window, 'scroll', this._scrollHandler);
         this._scrollHandler = null;
      }

      if (this._resizeHandler) {
         $removeHandler(window, 'resize', this._resizeHandler);
         this._resizeHandler = null;
      }
   },
   
   _attachWindowMouseDown : function() {
      this._documentMouseDownHandler = Function.createDelegate(this, this._onWindowMouseDown);
      $addHandler(document, 'mousedown', this._documentMouseDownHandler);
   },
   
   _detachWindowMouseDown : function() {
      if(this._documentMouseDownHandler) {
         $removeHandler(document, 'mousedown', this._documentMouseDownHandler);
         this._documentMouseDownHandler = null;
      }
   },
   
   _hoverPlaceAndShow : function() {
      this._hoverPlace();
      this._hoverShow();      
   },
   
   _hoverPlace : function() {    
      var location = Sys.UI.DomElement.getLocation(this._hoverCurrImg);     
      var bounds = Sys.UI.DomElement.getBounds(this._hoverCurrImg);
      var offset = ((48 - bounds.width) / 2) + 2;
      el = $get('avatarHover');
      el.style.left = (location.x - offset) + 'px';
      el.style.top = (location.y - offset) + 'px';
   },

   _hoverShow : function() {
      var id = 'hoverImg' + this._hoverCurrImg.avid;
      $get(id).style.display = 'block';      
      $get('avatarHover').style.display = 'block';
      this._attachHover();
   },

   _hoverToggleMenu : function() {
      if(this._hoverMenuShowing) {
         this._hoverHideMenu();
      } else {
         this._hoverShowMenu();
      }
   },
   
   _hoverShowMenu : function() {
      this._hoverMenuShowing = 1;  
      this._attachWindowMouseDown();
      this._changeImgSrc($get('avatarMenuButton'), 'avatarmenu_up.gif');
      
      if (this.get_avatarCache[this._hoverCurrImg.avid]) {
         this._fillHoverMenuAndShow(this.get_avatarCache[this._hoverCurrImg.avid]);     
      } else {
         this._showProgressAnim();
         photoWS.GetAvatarMenu(this._hoverCurrImg.avid, this._onGetRelationshipComplete, this._onGetRelationshipError, this._onGetRelationshipTimeout);
      }
   },
   
   _fillHoverMenuAndShow : function(data) {
      if(this._hoverMenuShowing) {
         $get('avatarMenuDown').style.display = 'block';  
         $get('relationship').innerHTML = data;   
      }
   }, 
   
   _hoverHideMenu : function() {
      this._hoverMenuShowing = 0;
      this._detachWindowMouseDown();
      this._changeImgSrc($get('avatarMenuButton'), 'avatarmenu_down.gif');
      $get('avatarMenuDown').style.display = 'none';
      this._hideProgressAnim();
   },
   
   _showProgressAnim : function() {
      $get('avatarMenuProgress').style.display = 'block';
      $get('hoverImg' + this._hoverCurrImg.avid).style.visibility = 'hidden';
      if (this._hoverCurrImg.id){
         $get(this._hoverCurrImg.id).style.visibility = 'hidden';
      }   
   },
   
   _hideProgressAnim : function() {
      $get('avatarMenuProgress').style.display = 'none'; 
      $get('hoverImg' + this.get_hoverCurrImg().avid).style.visibility = 'visible';
      if (this.get_hoverCurrImg().id){
         $get(this.get_hoverCurrImg().id).style.visibility = 'visible';
      }
   },
   
   _onGetRelationshipComplete : function(result) {
      var hoverMenu = Sys.Application.findComponent('avatarHover');
      hoverMenu._hideProgressAnim();
      if(result) {
         //hoverMenu.get_avatarCache[hoverMenu.get_hoverCurrImg().avid] = result;
         hoverMenu._fillHoverMenuAndShow(result);
      }
   },

   _onGetRelationshipTimeout : function(err) {
      var hoverMenu = Sys.Application.findComponent('avatarHover');
      hoverMenu._hideProgressAnim();
      alert('timeout...');
   },
   
   _onGetRelationshipError : function(err) {
      var hoverMenu = Sys.Application.findComponent('avatarHover');
      hoverMenu._hideProgressAnim();
      EpsilonCommonScripts.onRequestError(err);
   },

   // ======================  Event Handlers  ======================  
    _onHoverMenuButton : function() {
      this._hoverToggleMenu();
   },
     
   _onHoverMenuMouseOut : function() {
      this._avatarMouseOver = 0;
      if(this._hoverMenuShowing) {
         return;
      }
      this._hoverHideTimer.set_enabled(true);
   },
   
   _onHoverMenuMouseOver : function() {
      this._avatarMouseOver = 1;
      this._hoverHideTimer.set_enabled(false);
   },
   
   _onIconMouseOver : function(e) {
      this._hoverHideTimer.set_enabled(false);
      if(this._hoverMenuShowing) {
         return;
      }
      if (this._hoverCurrImg) {
         this._hoverHide();
      }
      this._hoverCurrImg = e.target;
      $get('avatarHoverLink').href = this._hoverCurrImg.parentNode.href;      
      this._hoverPlaceAndShow();
   },
   
   _onWindowMouseDown : function() {
      if (!this._avatarMouseOver) {
         this.hideMenuEffect();
      }
   },
   
   _onLayout : function() {
      this._hoverPlace();
   },
   
   _onHoverOutTick : function() {
      this._hoverHide();
   },

   hideMenuEffect : function() {
      this._hoverHideMenu();
      this._hoverHide();
   },
   
   recreateEffect : function(el) {
      var el = el.getElementsByTagName('img');
      for(var i=0; i<el.length; i++){
         this._avatarMenuProcessImg(el[i]);
      }
   },
   
   get_hoverCurrImg : function() {
      return this._hoverCurrImg;
   },
   set_hoverCurrImg : function(value) {
      this._hoverCurrImg = value;
   },
   
   get_avatarCache : function() {
      return this._avatarCache;
   },
   set_avatarCache : function(value) {
      this._avatarCache = value;
   }, 
   
   _changeImgSrc : function(el, imgName) {
      var arySrc = el.src.split("/");
      el.src = el.src.replace(arySrc[arySrc.length-1], imgName);
   }


}
epsilon.AvatarIcon.registerClass('epsilon.AvatarIcon', Sys.UI.Control);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();