title: Javascript OOP new object
body: <p>**** EDIT *****
  using the answer bellow I have created a new function and put my object into it's prototype.</p>
  
  <pre><code>var mySlider = new Slider();
  mySlider.init({.......})
  </code></pre>
  
  <p>but now when I try to call another function from within a function (this.animate) on my Slider.prototype all I get is </p>
  
  <blockquote>
    <p>"Uncaught TypeError: Cannot read property '0' of undefined"</p>
  </blockquote>
  
  <p>cant seem to work out how to call get other functions to work, I've amended my code bellow with my new code</p>
  
  <p>*****/ EDIT *****</p>
  
  <p>I've tried to create my own slider using dojo.</p>
  
  <p>I have an HTML page with the content and at the end of the page I have a script to start my slider</p>
  
  <pre><code>dojo.ready(function () {
  var mySlider = new Slider();
      mySlider.init({
          frameId: "#sliderFrame",
          slideClass: ".slide",
          sliderImgClass: ".sliderImage",
          captionClass: ".caption",
          thumbsClass: ".thumb",
          seconds: 1
      });
  });
  </code></pre>
  
  <p>then on my external js file I have my code</p>
  
  <pre><code>function Slider() {}
  
  Slider.prototype = {
  //Initialize all Elements
  init: function (object) {
      this.sliderFrame = dojo.query(object.frameId);
      this.slideContainers = this.sliderFrame.query(".slide");
      this.slideImg = this.sliderFrame.query(object.sliderImgClass) || '';
      this.SlideCaption = this.sliderFrame.query(object.captionClass) || '';
      this.thumbs = this.sliderFrame.query(object.thumbsClass) || '';
      this.numOfSlides = this.slideImg.length || 0;
      this.hovering = false;
      this.time = object.seconds * 1000 || 3000;
      this.myInterval = '';
      this.playing = 0;
      this.start();
  },
  // Starts animation on slide 0
  start: function () {
      this.animate(this.playing);
      this.initLoop(true);
      this.listener(this.thumbs, this.sliderFrame);
  },
  
  //EventListener for mouse events
  listener: function (theThumb, theFrame) {
      theThumb.connect('onclick', this.clicked);
      theFrame.connect('mouseenter', this.mouseOn);
      theFrame.connect('mouseleave', this.mouseOff);
  },
  mouseOn: function () {
      this.initLoop(false);
  },
  
  mouseOff: function () {
      this.initLoop(true);
  },
  
  clicked: function (e) {
      this.playing = this.getAttribute("data-slide");
      this.animate(this.playing);
  },
  
  
  // start interval if true, otherwise clear
  initLoop: function (act) {
  
      if (act === true) {
          this.myInterval = setInterval(this.loopSlides, this.time);
      } else {
          clearInterval(this.myInterval);
      }
  },
  // interval resets loops through to end and back to zero
  
  loopSlides: function () {
      if (this.playing &lt; this.numOfSlides - 1) {
          this.playing++;
          this.animate(this.playing);
      } else {
          this.playing = 0;
          this.animate(this.playing);
      }
  },
  
  //the animation which makes changes css to active slide 'e' || this.playing
  animate: function (e) {
  
      for (var ii = 0; ii &lt; this.numOfSlides; ii++) {
          this.slideContainers[ii].className = "slide";
          this.thumbs[ii].className = "thumb";
          this.slideImg[ii].className = "sliderImage";
          this.SlideCaption[ii].className = "caption";
      }
      this.slideContainers[e].className = "slide active";
      this.thumbs[e].className = "thumb active";
      this.slideImg[e].className = "sliderImage active";
      this.SlideCaption[e].className = "caption active";
  }
  
  };
  </code></pre>
  
  <p>The object works fine by it self and everything does as need be, I'm sure I could make it better.</p>
  
  <p>What I'd like to do is have the mySlider set up with a "new" or "Object.create".
  This is so I can have multiple Sliders on one page each becoming their own object.</p>
  
  <p>I just can't get my script to run once I implement "new" or "Object.create" as my Slider needs to be a function not an object! :(</p>
  
  <p>Cn anyone point me to a good pattern that I could use to implement what I'm trying to do.
  I've gone through "essential js design patterns" but can't seem to find a pattern that fits.</p>
  
  <p>Thanks in advance :)</p>