dojo.require("dojo.fx");
dojo.require("dojo.fx.easing");
WWScroller = {
};

dojo.declare("WWScroller", null, {
	constructor: function(args) {
	 dojo.mixin(this,args);
	 this.node = dojo.byId(this.node);
	 this.width = dojo.position(this.node).w;
	 this.height = dojo.position(this.node).h;
	 this.inner = dojo.query('div.WW-innercontainer', this.node)[0];
	 this.imgs = dojo.query('img', this.node);
	 this.fxLeft = dojo.animateProperty(
    {
      node: this.inner,
      duration: this.scrollingtime,
      rate: 40,
      properties: {
        left: { start: 0, end: this.width-dojo.position(this.inner).w }
      }
    });
    dojo.connect(this.fxLeft,"onEnd", dojo.hitch(this,'onLeftEnd'));
	 this.fxRight = dojo.animateProperty(
    {
      node: this.inner,
      duration: this.scrollingtime,
      rate: 40,
      properties: {
        left: { start: this.width-dojo.position(this.inner).w, end: 0 }
      }
    });
    dojo.connect(this.fxRight,"onEnd", dojo.hitch(this,'onRightEnd'));
    dojo.forEach(this.imgs,function(img){
      dojo.connect(img,"onmouseenter", dojo.hitch(this,'onMouseEnterImg'));
      dojo.connect(img,"onmouseleave", dojo.hitch(this,'onMouseLeaveImg'));
      img.fadeOut = dojo.fadeOut({node: img, end: 0.6, rate: 40, duration: 200, easing: dojo.fx.easing.backOut});
	    img.fadeIn = dojo.fadeIn({node: img, rate: 40, duration: 200});
	   
	     var toolpos = "top";
	    if(this.tooltippos == "bottom"){
	     toolpos = "bottom"
	    }
	    img.tooltip = dojo.create("div",{'class': 'WW-tooltip '+toolpos },dojo.body());
	    
	    
	    dojo.create("div",{'class': 'WW-tooltip-content '}, dojo.create("div",{'class': 'WW-tooltip-bottom'},img.tooltip)).innerHTML = dojo.attr(img,'longdesc');
      if(this.tooltippos == "top"){
  	    dojo.style(img.tooltip, {
          top: dojo.position(img, true).y-dojo.position(img.tooltip).h-150+'px',
          opacity: 0,
          display: 'none'
        });
      }else{
  	    dojo.style(img.tooltip, {
          top: dojo.position(img, true).y+dojo.position(img, true).h+150+'px',
          opacity: 0,
          display: 'none'
        });
      }
	    img.tooltip.fxDown = dojo.animateProperty({node: img.tooltip, properties: {top: 0, opacity: 0.8}, duration: 1000, rate: 40});
	    img.tooltip.fxUp = dojo.animateProperty({node: img.tooltip, properties: {top: 0, opacity: 0}, duration: 1000, rate: 40, onEnd: function(){dojo.style(this.node, 'display', 'none')} });
    }, this);
    this.onRightEnd();
	},
	onLeftEnd : function(){
    this.currentfx = this.fxRight;
    this.currentfx.play();
  },
	onRightEnd : function(){
    this.currentfx = this.fxLeft;
    this.currentfx.play();
  },
	onMouseEnterImg : function(e){
	  var img = e.currentTarget;
	  dojo.style(img.tooltip, {
	          "display" : 'block'
        });
	  dojo.fx.chain([img.fadeOut, img.fadeIn]).play();
	  if(this.tooltippos == "top"){
	   this.showTooltipTop(img);
	  }else{
	   this.showTooltipBottom(img);
	  }
	  
    if(this.currentfx && this.currentfx.status() == "playing"){
      this.currentfx.pause();
    }
  },
  showTooltipTop : function(img){
    var pos = dojo.position(img, true);
    var postooltip = dojo.position(img.tooltip);
	  var top = pos.y-dojo.position(img.tooltip).h;
	  dojo.style(img.tooltip, {
            "left": (pos.x+pos.w/2-postooltip.w/2)+'px'
    });
    img.tooltip.fxDown.properties.top = top;
    img.tooltip.fxUp.properties.top = top-150;
    img.tooltip.fxUp.stop();
    img.tooltip.fxDown.play();
  },
  showTooltipBottom : function(img){
    var pos = dojo.position(img, true);
    var postooltip = dojo.position(img.tooltip);
	  var top = pos.y+pos.h;
	  dojo.style(img.tooltip, {
            "left": (pos.x+pos.w/2-postooltip.w/2)+'px'
    });
    img.tooltip.fxDown.properties.top = top;
    img.tooltip.fxUp.properties.top = top+150;
    img.tooltip.fxUp.stop();
    img.tooltip.fxDown.play();
  },
	onMouseLeaveImg : function(e){
	  var img = e.currentTarget;
	  img.tooltip.fxDown.stop();
	  img.tooltip.fxUp.play();
    if(this.currentfx && this.currentfx.status() == "paused"){
      this.currentfx.play();
    }
  }

});