var NI = {
  cols:["#24b3fc","#0f0","#f09","#ff0"],
  grs:[
{
// hat
c:0,//color
p:[318,13,101,145],//fp position  x,y,w,h,bg_offset
m:[10,100,15,85],//fp tx pos relative to p  x,y,tx_offset,mbgw_width
hs:[[0,0,50,145],[50,-10,60,85]], // hostspots
t:[100,150,60]//top position x,y,tx_offset
},
{
// chair
c:1,
p:[366,114,178,145],
m:[12,34,20,200],
hs:[[0,0,100,90],[50,30,100,90]],
t:[140,100,70]
},
{
// cam
c:1,
p:[158,99,218,173],
m:[10,100,20,90],
hs:[[20,0,80,50],[0,50,200,60],[0,110,100,60]],
t:[135,150,70]
},
{
// sofa
c:2,
p:[319,204,308,218],
m:[10,30,15,120],
hs:[[0,0,100,130],[100,30,50,30],[20,60,230,100],[120,140,190,50],[200,180,90,50]],
t:[100,50,80]
},
{
// fish
c:3,
p:[169,261,126,123],
m:[25,15,30,123],
hs:[[0,0,80,95],[60,50,58,70]],
t:[165,150,70]
},
{
// lamp
c:2,
p:[256,228,85,195],
m:[21,20,20,93],
hs:[[0,0,62,80],[0,40,70,40],[30,0,20,195],[0,150,81,50]],
t:[135,140,70]
},
{
// tv
c:0,
p:[47,301,181,225],
m:[30,80,25,0],
hs:[[0,0,40,130],[40,40,80,20],[10,60,170,130],[40,190,90,35]],
t:[135,155,70]
}
  ],
  fp: {
    init: function(){
      var c = $("c");
      
      var fpc = EL({id:"fpc"});
      c.insertBefore(fpc, c.firstChild);
      
      var lis = $("mm").getElementsByTagName("li");
      var mms = [];
      for (var i=0, l=lis.length; i<l; i++)
        if (lis[i].className.charAt(0) == "g") mms.push(lis[i]);
      
      // calculate bg offsets
      for (var i=0, w=fpc.offsetWidth, o; i<7; i++){
        o = NI.grs[i];
        o.p[4] = -w
        w += o.p[2];
      }
      
      for (var i=0, l=mms.length, item, o, p, x, y; i<l; i++){
        item = mms[i];
        Element.cleanWhitespace(item);
        
        var link = item.firstChild;
        var next = link.nextSibling;
        var sms = (next && next.tagName.toLowerCase()) == "ul" ? next : null;
        
        o = NI.grs[item.className.charAt(1)*1];
        
        // mm
        o.mm = item;
        item.o = o;
        item.onmouseover = function(){ NI.fp.show(this.o); };
        
        x = o.p[0];
        y = o.p[1];
        
        // menu bgs
        o.mbg = EL({
          parentNode:fpc, className:"mc", 
          style: { display:"none", zIndex:0, left:x+o.m[0]+"px", top:y+o.m[1]+"px" }
        });
        o.mbgw = EL({parentNode:o.mbg, className:"mbgw", _w:0, w:o.m[3], style:{width:"0px"}})
        o.mbg0 = EL({parentNode:o.mbg, className:"mbg0", _w:0, style:{width:"0px", backgroundPosition:"left -" + o.c*8 + "px" } });
        o.mbg1 = EL({parentNode:o.mbg, className:"mbg1", _w:0, style:{width:"0px"} });
        o.mbg2 = EL({parentNode:o.mbg, className:"mbg2", _w:0, style:{width:"0px"} });
        
        // menu txts
        o.mtx = EL({
          parentNode:fpc, className:"mc",
          style: { visibility:"hidden", zIndex:3, left:"0px", top:y+o.m[1]+"px", width:x+o.m[0]+"px"/*, borderBottom:"1px solid #ff0"*/ }
        });
        o.mtitle = EL({parentNode:o.mtx, className:"mtitle", style:{right:o.m[2]+"px"} });
        o.mtitle.appendChild(link.cloneNode(true));
        
        if (sms){
          o.msubs = EL({parentNode:o.mtx, className:"msubs", 
            style:{right:o.m[2]+"px", width:x+o.m[0]+200+"px" /*,borderBottom:"1px solid #f00"*/} 
          });
          o.msubs.appendChild(item.removeChild(sms));
        }
        
        // bg widths
        var w = sms ? Math.max(sms.clientWidth, o.mtitle.clientWidth) + 10 + o.m[2] : o.mtitle.clientWidth + 10 + o.m[2];
        o.mbg0.w = w + 50;
        o.mbg1.w = w + 90;
        o.mbg2.w = sms ? w : 0;
        
        // overlay
        o.overlay = EL({
          parentNode:fpc, className:"gc",
          style:{display:"none", zIndex:1, left:x+"px", top:y+"px", width:o.p[2]+"px", height:o.p[3]+"px", backgroundPosition:o.p[4]+"px 0"}
        });
        
        // hotspots
        for (var h=0, hl=o.hs.length, hs; h<hl; h++){
          hs = o.hs[h];
          EL({
            o:o, parentNode:fpc,
            style:{position:"absolute", zIndex:2, //border:"1px dotted "+NI.cols[o.c],
              left:x + hs[0]+"px", top:y + hs[1]+"px", width:hs[2]+"px", height:hs[3]+"px"
            },
            onmouseover: function(){ NI.fp.show(this.o); }
          });
        }
        
      }
      
    },
    show: function(o){
      if (this.active){
        if (this.active == o) return;
        this.hide(this.active)
      }
      this.active = o;
      o.mbg.style.display = "";
      o.overlay.style.display = "";
      Element.addClassName(o.mm, "active");
      
      var steps = 8, 
          PT = PropertyTransformer,
          op = {onTransform: function(){ this.style.width = this._w + "px"; } };
      
      PT.add(o.mbg0, "_w", o.mbg0.w, steps, {
        onTransform: op.onTransform,
        onTransformComplete: function(){
          o.mtx.style.visibility = "";
        }
      });
      PT.add(o.mbgw, "_w", o.mbgw.w, steps, op);
      PT.add(o.mbg1, "_w", o.mbg1.w, steps, op);
      PT.add(o.mbg2, "_w", o.mbg2.w, steps, op);
      
    },
    hide: function(o){
      o.mtx.style.visibility = "hidden";
      Element.removeClassName(o.mm, "active");
      
      var steps = 4, 
          PT = PropertyTransformer,
          op = {onTransform: function(){ this.style.width = this._w + "px"; } };
      
      PT.add(o.mbg0, "_w", 0, steps, {
        onTransform: op.onTransform,
        onTransformComplete: function(){
          o.mbg.style.display = "none";
          o.overlay.style.display = "none";
        }
      });
      PT.add(o.mbgw, "_w", 0, steps, op);
      PT.add(o.mbg1, "_w", 0, steps, op);
      PT.add(o.mbg2, "_w", 0, steps, op);
      
    }
  },
  top:{
    init:function(){
      var h = $("h"), 
          lis = $("mm").getElementsByTagName("li"),
          g = h.className.charAt(1),
          o = NI.grs[g],
          li;
      
      if (!o) return;
      
      for (var i=0, l=lis.length; i<l; i++){
        li = lis[i];
        if (li.className.charAt(1) == g) break;
      }
      
      Element.cleanWhitespace(li);
      
      var link = li.firstChild;
      var next = link.nextSibling;
      var sms = (next && next.tagName.toLowerCase() == "ul") ? next : null;
      
      var c = EL({style:{position:"absolute", left:o.t[0]+"px", top:o.t[1]+"px"}});
      h.insertBefore(c, h.firstChild);
      
      // menu bgs
      var bg = EL({
        parentNode:c, className:"mc"
        //style: { display:"none", zIndex:0, left:x+o.m[0]+"px", top:y+o.m[1]+"px" }
      });
      var bg0 = EL({parentNode:bg, className:"mbg0", _w:0, style:{width:"0px", backgroundPosition:"right -" + o.c*8 + "px" } });
      var bg1 = EL({parentNode:bg, className:"mbg1", _w:0, style:{width:"0px"} });
      var bg2 = EL({parentNode:bg, className:"mbg2", _w:0, style:{width:"0px"} });

      // menu txts
      var tx = EL({
        parentNode:c, className:"mc",
        style: { visibility:"hidden", zIndex:3, left:"0px", top:"0px" }
      });
      var title = EL({parentNode:tx, className:"mtitle", style:{left:o.t[2]+"px"}});
      title.appendChild(link.cloneNode(true));

      if (sms){
        var subs = EL({parentNode:tx, className:"msubs", 
          style:{left:o.t[2]+"px", width:"500px"} 
        });
        subs.appendChild(li.removeChild(sms));
      }
      
      // bg widths
      var w = sms ? Math.max(sms.clientWidth, title.clientWidth) + 10 + o.t[2] : title.clientWidth + 10 + o.t[2];
      bg0.w = w + 50;
      bg1.w = w + 90;
      bg2.w = sms ? w : 0;
      
      var steps = 8, 
          PT = PropertyTransformer,
          op = {onTransform: function(){ this.style.width = this._w + "px"; } };
      
      PT.add(bg0, "_w", bg0.w, steps, {
        onTransform: op.onTransform,
        onTransformComplete: function(){
          tx.style.visibility = "";
        }
      });
      PT.add(bg1, "_w", bg1.w, steps, op);
      PT.add(bg2, "_w", bg2.w, steps, op);
      
      
    }
  },
  gal:{
    init:function(){
      var thumbs = $("thumbs");
      if (!thumbs) return;
      thumbs = thumbs.getElementsByTagName("img");
      for (var i=0, l=thumbs.length, img; i<l; i++){
        img = thumbs[i];
        img.onclick = function(){
          var src = this.src.replace(".th.", ".large.");
          var d = this.getAttribute("dimensions").split(",");
          var descr = this.getAttribute("descr");
          $("c2").innerHTML = '<img src="'+src+'" width="'+d[0]+'" height="'+d[1]+'"><div>'+descr+'</div>';
        }
        if (i==0) img.onclick();
      }
    }
  }
};


// lib
Object.extend = function(d, s) {for (var p in s) d[p] = s[p]; return d;};

function $(el) { return document.getElementById(el); }

function EL(o){
  var el = document.createElement(o.tagName||'div');
  for (var i in o){
    switch (i) {
      case 'parentNode': 
      case 'tagName': break;
      case 'style': var p; for (p in o.style) el.style[p] = o.style[p]; break;
      default: el[i] = o[i];
    }
  }
  if (o.parentNode) o.parentNode.appendChild(el);
  return el;
};

Element = {
  addClassName: function(el, cl){ 
    if (!(new RegExp("\\b"+cl+"\\b")).test(el.className)) el.className += ' '+cl; 
  },
  removeClassName: function(el, cl){ 
    el.className = el.className.replace((new RegExp("\\b"+cl+"\\b")), '');
  },
  cleanWhitespace: function(element) {
    var node = element.firstChild, next;
    while (node) {
      next = node.nextSibling;
      if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
        element.removeChild(node);
      node = next;
    }
    return element;
  }
};

PropertyTransformer = {
  transforms:[],
  add: function(obj, property, value, steps, options){
    var transform = Object.extend({
      obj: obj, property: property, start_value: obj[property], delta_value: value - obj[property], steps: steps, step: 0,
      easing: 'easeInOutQuart', amplitude: 1, period: 1, round: true
    }, options||{})
    
    this.kill(obj, property)
    this.transforms.push(transform)
    this.start();
  },
  start: function(){
    if (!this.interval_id){
      this.interval_id = setInterval(function(){
        PropertyTransformer.next();
      }, 35);
    }
  },
  next: function(){
    var i, l = this.transforms.length-1, tr, val;
    for (i=l; i>=0; i--){
      tr = this.transforms[i];
      tr.step++;
      if (tr.step == tr.steps){
        tr.obj[tr.property] = tr.start_value + tr.delta_value;
      } else {
        val = Math[tr.easing](tr.step, tr.start_value, tr.delta_value, tr.steps, tr.amplitude, tr.period);
        tr.obj[tr.property] = (tr.round) ? Math.round(val) : val;
      }
    }
    for (i=l; i>=0; i--){
      tr = this.transforms[i];
      if (tr.onTransform) tr.onTransform.call(tr.obj, tr.property);
    }
    for (i=l; i>=0; i--){
      tr = this.transforms[i];
      if (tr.step == tr.steps) {
        if (tr.onTransformComplete) tr.onTransformComplete.call(tr.obj, tr.property);
        this.transforms.splice(i,1);
      }
    }
    if (this.transforms.length == 0) {
      clearInterval(this.interval_id);
      delete this.interval_id;
    }
  },
  kill: function(obj, property){
    if (property){
      for (var i=this.transforms.length-1, tr; i>=0; i--){
        tr = this.transforms[i];
        if (tr.obj == obj && tr.property == property){
          this.transforms.splice(i,1);
          break;
        }
      }
    } else {
      for (var i=this.transforms.length-1; i>=0; i--){
        if (this.transforms[i].obj == obj) this.transforms.splice(i,1);
      }
    }
  }
};

Object.extend(Math, {
  easeInOutQuart: function (t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
    return -c/2 * ((t-=2)*t*t*t - 2) + b;
  }
});