var logo = {
  SIZE:{w:360, h:151},
  LENGTH:107,
  OFFID:0,
  nodes:{clickNode:null, displayNode:null},
  init:function(){
    this.nodes.displayNode = jQuery("<div/>", {"id":"logo"});
    this.nodes.displayNodeLV = jQuery("<div/>", {"id":"lv"});
    this.nodes.displayNode
      .css({
        width:this.SIZE.w,
        height:this.SIZE.h});
    this.nodes.clickNode = this.nodes.displayNode.clone();
    this.nodes.clickNode
      .attr("id", "logo_click")
      .click(function(){
        timeline.scrollToCurrent();
      });
    this.nodes.displayNode
      .append(this.nodes.displayNodeLV);
    logo.gotoFrame(0);
    jQuery("body")
      .append(this.nodes.displayNode)
      .append(this.nodes.clickNode);
    jQuery(document).scroll(function(){
      logo.gotoFrame(logo.getFrameNumber());
    });
  },
  gotoFrame:function(frameNumber){
    this.nodes.displayNode.css({
      backgroundPosition:"100px -"+(frameNumber*this.SIZE.h)+"px"
    });
  },
  getFrameNumber:function(){
    return Math.round(jQuery(document).scrollTop()/(jQuery(document).height()/logo.LENGTH));
  }
};