dojo.require("dojo.fx");
dojo.require("dojo.fx.easing");

WWViewer = {
};

dojo.declare("WWViewer", null, {
	constructor: function(args) {
    dojo.mixin(this,args);
    this.lock = false;
    this.node = dojo.byId(this.node);
    this.blockheight = 60;
	  
	  this.left = dojo.query('.WW-innerleft', this.node)[0];
	  this.left.onselectstart = function() {return false;}
    this.left.onmousedown = function() {return false;}

    this.leftcontents = dojo.query('td.WW-leftcontent', this.left);
    this.leftshadows = dojo.query('td.WW-shadow', this.node);
    this.rightcontents = dojo.query('.WW-rightcontent', this.node);
    
    dojo.forEach(this.leftcontents,function(content, i){
      this.leftcontents[i].addHover = this.leftshadows[i];
      this.leftcontents[i].index = i;
      dojo.connect(content,"onmouseenter", function(){dojo.addClass(this.addHover,"WW-hover");});
      dojo.connect(content,"onmouseleave", function(){dojo.removeClass(this.addHover,"WW-hover");});
      dojo.connect(content,"onclick", dojo.hitch(this, "glideTo", i));
    }, this);
    this.start(4);
    },
    
    start: function(index){
      dojo.style(this.left, "top", -(index-2)*this.blockheight+"px");
      dojo.addClass(this.leftcontents[index],"WW-selected");
      dojo.addClass(this.leftshadows[index],"WW-selected");
      dojo.style(this.rightcontents[index],"display", "block");
      this.current = index;
    },
        
    glideTo: function(index){
      if(this.lock) return;
      this.lock = true;
      var top = dojo.style(this.left,"top");
      var move = dojo.position(this.leftcontents[index],true).y-dojo.position(this.leftcontents[this.current],true).y;
      var anim = dojo.animateProperty({node: this.left, properties: {top: top - move}, duration: this.effect, rate: 33});
      dojo.connect(anim, "onEnd", dojo.hitch(this, "movingblocks", this.leftcontents[this.current].index-this.leftcontents[index].index));

      anim.play();
      
      dojo.removeClass(this.leftcontents[this.current],"WW-selected");
      dojo.removeClass(this.leftshadows[this.current],"WW-selected");
      dojo.addClass(this.leftcontents[index],"WW-selected");
      dojo.addClass(this.leftshadows[index],"WW-selected");
      dojo.style(this.rightcontents[this.current],"display", "none");
      dojo.style(this.rightcontents[index],"display", "block");
      this.current = index;
    },
    
    movingblocks : function(blocknum){
      var top = dojo.style(this.left,"top");
      if(blocknum > 0){
        for(var x = 0; x < blocknum; x++){
          var t = dojo.query("table", this.left);
          dojo.place(t[t.length-1], this.left, "first");
          top-=this.blockheight;
          dojo.style(this.left,"top", top+"px");
        }
      }else if(blocknum < 0){
        for(var x = 0; x < -blocknum; x++){
          dojo.place(dojo.query("table", this.left)[0], this.left, "last");
          top+=this.blockheight;
          dojo.style(this.left,"top", top+"px");
        }
      }
      dojo.query('td.WW-leftcontent', this.left).forEach(function(content, i){
        content.index = i;
      });
      this.lock = false;
    }

});