title: JSON object multiple instance (slide effects)
body: <p>i'm trying to make a slide plugin use pure javascript,after i finished my code,everything goes fine if i only use one slide function in one html page,but if i want more than one ,page will crashed,my plugin is blow:</p>
  
  <pre><code>var akulubala = {
  "init_":{"speed":1000,
           "direction":"bottom",//direction 
           "mode":"fitful",//scroll mode durative or fitful
           "id":"akulubala_scroll",
           "auto_play":true,
           "style":{}
          },
  "offset":null,
  "margin_x":0,
  "scroll_container":null,
  "scroller":null,
  "scroller_elements":0,
  "intval_timer":null,
  "time_out_timer":null,
  
   scroll : function(obj){
       if(typeof obj !=="undefined"){             
          for(var key in obj){
              if(this.init_.hasOwnProperty(key)){
                  this.init_[key] = obj[key];
              }
          }
      }
      console.log(this);
      this.scroll_container = document.getElementById(this.init_.id);
      this.scroller = document.getElementById(this.init_.id+"_child");
      this.styleset(this.init_.style);
      this.run();
  },
  styleset:function(style){
    var default_style = {"margin":"0px","padding":"0px"};
  
    for(var key in default_style){
            this.scroll_container.style[key] = default_style[key];
            this.scroller.style[key] = default_style[key];    
    }
  
    function isEmpty(obj){
        for(var name in obj){
            return false;
        }
        return true;
    }
    //overflow
      if(style.overflow===true){
          this.scroll_container.style.overflow = "visible";
      }else{
          this.scroll_container.style.overflow = "hidden";
      }
  
  
    this.scroller_elements = this.scroller.children.length;
  
   if(this.init_.direction === "top" || this.init_.direction === "bottom"){         
          if(!isEmpty(style)){
              this.scroll_container.style.height = style.height;
              this.scroll_container.style.width = style.width;
              this.scroller.style.height =  this.scroller_elements*
  parseInt(this.scroll_container.style.height.replace("px",""))+"px";
              this.scroller.style.width = style.width;
  
          }else{
              this.scroll_container.style.height = "20px";
              this.scroll_container.style.width = "200px";
              this.scroller.style.height = this.scroller_elements*20+"px";
              this.scroller.style.width = "200px";
          }
  
          if(this.init_.direction === "bottom"){
              this.scroller.style.position = "relative";                
              this.scroller.style.top = 
  (0-(this.scroller_elements-1)*
  parseInt(this.scroll_container.style.
  height.replace("px","")))+"px";                
          }else{
              //this.scroller.style.cssFloat = "left";
          }            
          this.offset = parseInt(this.scroll_container.style.height.replace("px",""));
   }else{
          if(!isEmpty(style)){
              this.scroll_container.style.height = style.height;
              this.scroll_container.style.width = style.width;
              this.scroller.style.height = style.height;
              this.scroller.style.width = this.scroller_elements*
  parseInt(this.scroll_container.style.width.replace("px",""))+"px";
          }else{
              this.scroll_container.style.height = "20px";
              this.scroll_container.style.width = "200px";
              this.scroller.style.height = "20px";
              this.scroller.style.width = this.scroller_elements*200+"px";
          }
          if(this.init_.direction === "right"){
              this.scroller.style.position = "relative";                
              this.scroller.style.left = 
  (0-(this.scroller_elements-1)*parseInt(this.scroll_container.
  style.width.replace("px","")))+"px";                
          }else{
              this.scroller.style.cssFloat = "left";
          }
           this.offset = parseInt(this.scroll_container.style.width.replace("px",""));
   }  
  },
  run :function(){
  
      if(this.init_.auto_play){
          this.intvalTimerStart();
      }else{
          this.waitTrigger();
      }
      this.holdEffect();
  },
  start:function(){
          this.move();
  },
  waitTrigger:function(){
  
  },
  move:function(){
      this.intvalTimerStop();
      clearTimeout(timer_out_timer);
      var speed = this.init_.speed,offset=this.offset,obj = this;
      var timer_out_timer = setTimeout(function(){
          obj.move();
      },this.init_.speed/this.offset);
      if(this.margin_x&lt;this.offset){
          this.margin_x +=1;
      }else{        
          this.margin_x = 0;
          clearTimeout(timer_out_timer);
          if(this.init_.direction !== "bottom"){
              this.scroller.appendChild(this.scroller.children[0]);
          }else{
              this.scroller.insertBefore
  (this.scroller.children[this.scroller_elements-1],this.scroller.childNodes[0]);
          }         
          this.intvalTimerStart();
      }
      this.effectWork();
      this.scroll_container.onmouseover = function(){
          clearTimeout(timer_out_timer);
      };       
      this.scroll_container.onmouseout = function(){
              timer_out_timer = setTimeout(function(){
                  obj.move();
              },speed/offset);
      };
  },
  effectWork:function(){
      switch(this.init_.direction){
          case "top":
              this.scroller.style.marginTop = (0-this.margin_x)+"px" ; 
              break;
          case "bottom":
              this.scroller.style.top = 
  this.margin_x-parseInt((this.scroller_elements-    1)*parseInt(this.
  scroll_container.style.height.replace("px","")))+"px" ;
              break;
          case "left":
              this.scroller.style.marginLeft = (0-this.margin_x)+"px" ;
              break;
          case "right":
              this.scroller.style.marginLeft = this.margin_x+"px" ;
              break;
      }       
  },
  holdEffect:function(){
      var obj = this;
      this.scroll_container.onmouseover = (function(obj){
          obj.intvalTimerStop();
      })(obj);
      this.scroll_container.onmouseout = (function(obj){
          obj.intvalTimerStart();
      })(obj);
  },
  intvalTimerStart:function(){
      var obj = this;
      if(this.init_.mode==="durative"){
          this.intval_timer = setInterval(function(){
              obj.start();
          }, 0);
      }else{
          this.intval_timer = setInterval(function(){
              obj.start();
          }, this.init_.speed);
      }              
  },
  intvalTimerStop:function(){
      clearInterval(this.intval_timer);
      return false;
  }    
  };
  </code></pre>
  
  <p>html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;script src="./m_scroll.js" type="text/javascript" &gt;&lt;/script&gt;
      &lt;style&gt;
          #akulubala_scroll{
              cursor: pointer;
          }
          #akulubala_scroll_child li{
              list-style: none;
              height: 160px;
              width: 280px;
              float: left;
          }
          #example{
              cursor: pointer
          }
          #example_child li{
              list-style: none;
              float: left;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body style="padding:10px"&gt;
      &lt;div id="akulubala_scroll" style="border:1px solid black"&gt;
      &lt;ul id="akulubala_scroll_child"&gt; 
        &lt;li&gt;&lt;img src="1.jpg" /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="2.jpg" /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="3.jpg" /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="4.jpg" /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="5.jpg" /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="6.jpg" /&gt;&lt;/li&gt;              
      &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="example"&gt;
          &lt;ul id="example_child"&gt;
              &lt;li&gt;&lt;a name="ime_hw" href="#"&gt;a&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a name="ime_py" href="#"&gt;b&lt;/a&gt;&lt;/li&gt;
              &lt;li class="ln"&gt;c&lt;/li&gt;
              &lt;li&gt;&lt;a name="ime_cl" href="#"&gt;d&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;        
      &lt;script&gt;
      akulubala.scroll({
          "id":"akulubala_scroll",
          "mode":"durative",
          "direction":"left",
          "speed":6000,
          "style":{
              "width":"280px",
              "height":"160px",
              "overflow":false
          }
      });
      //akulubala.scroll({
      //    "id":"example",
      //    "mode":"fitful",
      //    "direction":"left"
      // });  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  Again,if i only want frist ul scroll,nothing wrong with this,but if i want id#example also scroll,page will crash,thanks very much!
  </code></pre>