/*
funzioni per la creazione dei Tab
*/
RegisterScript('t4uTabs', 1, 'toscana4u tabs');
Require([ 'AnimeJ', { Name: 'AnimeJ', Version: 1 } ]);

function Tab(img, w, txt, content) {
  this.Image = img;
  this.Text = txt;
  this.Width = w;
  this.WidthOverlap = w * 0.6;
  this.Content = content;
  this.Element = document.createElement('div');
  this.Element.style.position = 'absolute';
  this.Element.innerHTML = '<img src="'+this.Image+'" alt="'+this.Text+'" onclick="this.parentNode.SelectTab()"/>';
  this.Element.Tab = this;
  this.Element.SelectTab = function () {
    var num = 0;
    while (this.nextSibling != this.parentNode.lastChild) {
      var d = this.nextSibling;
      this.parentNode.removeChild(this);
      d.parentNode.insertBefore(this, d.nextSibling);
      num++;
    }
//    alert('pippo');
    var animet = new Timeline();
    
    var p = this.parentNode.firstChild;
    var off = 0;
    while (p.nextSibling != p.parentNode.lastChild) {
      if (p.nodeName != "#text") {
        animet.SetAt(0, AnimeJInterp.px(1000, 40, p.Tab.Element.style, "left", parseInt(p.Tab.Element.style.left), off));
//        p.Tab.SetOffset(off);
        off += p.Tab.WidthOverlap;
      }
      p = p.nextSibling;
    }
    animet.SetAt(0, AnimeJInterp.px(400, 40, p.Tab.Element.style, "left", parseInt(p.Tab.Element.style.left), off));
//    p.Tab.SetOffset(off);

    // Move content
    var content = p.parentNode.lastChild.firstChild.ScrollContent();
    var t = new Timeline();
    var top = 0;
    var height = parseInt(content.parentNode.clientHeight);
    t.SetAt(0, AnimeJInterp.px(200, 40, content.style, "top", top, top - height));
    t.OnEnd = function (d) {
      content.innerHTML = p.Tab.Content;
      var ret = new Timeline();
      ret.SetAt(0, AnimeJInterp.px(200, 40, content.style, "top", top - height, top));
      ret.Run();
    }
    animet.Run();
    t.Run();
  }
  this.SetOffset = function(off) {
    this.Element.style.left = off + 'px';
  }

}

function TabContent(w, h, padleft, imgs, texts, actions) {
  this.Images = imgs;
  this.Texts = texts;
  this.Actions = actions;
  this.Render = function() {
    var i, ret = '<table height="'+h+'" width="'+(this.Images.length * (w + 10))+'" cellspacing="0" cellpadding="0"><tr>';
    for (i = 0; i < this.Images.length; i++) {
      ret += '<td width="'+w+'" valign="middle" style="white-space: normal; background: url('+this.Images[i]+') no-repeat; padding-left: '+padleft+'px; padding-right: 10px; padding-top: 10px; padding-bottom: 5px; font-size: 8pt; color: 292929;" onclick="'+this.Actions[i]+'">'+this.Texts[i]+'</td>';
    }
    return ret + "</tr></table>";
  }  
}