function Slider(container) {
   // HTML container holding the visual slider
   if (!container)
      container = 'slider_container'
   
   this.container = document.getElementById(container);
   
   // array containing all slider data
   this.slider_data = new Array();
   
   // current index selected
   this.current_index = 0;
   
   // number of images in a row
   this.columns = 3;
   
   // first we fill all images
   this.first_run = true
   
   // last mode (left or right)
   this.last_mode = 'right'
   
   // turn debugging off
   this.debug_off = true
   
   this.add = function(villa_id,thumbnail,name,city,minprice,maxprice) {
      this.slider_data.push([villa_id,escape(thumbnail),escape(name),city,escape(minprice),escape(maxprice)])
      setTimeout("thumbs.preload_image('" + thumbnail + "')",1000)
   }
   
   this.preload_image = function(image) {
      var img = new Image();
      img.src = image;
   }
   
   this.create_img = function(src,alt,title) {
      var img = document.createElement("img")
      img.setAttribute("src",src)
      img.setAttribute("alt",alt)
      img.setAttribute("title",title)
      img.setAttribute("width",133)
      img.setAttribute("height",100)
      return img
   }
   
   this.euro = function() {
      return String.fromCharCode(8364)
   }
   
   this.create_title = function(name,city) {
      return name + "<br />" + city
   }
   
   this.create_title_link = function(name,city) {
      return "Klik hier om de details van de vakantivilla " + name + " in de plaats " + city + " te bekijken "
   }
   
   this.create_description = function(my_title,minprice,maxprice) {      
      // title
      var title  = document.createTextNode(my_title)
      var title_div = document.createElement("div")
      title_div.className = 'image_box_title'
      title_div.innerHTML = my_title      
      
      var prices = document.createTextNode(this.euro() + minprice + ' - ' + this.euro() + maxprice + " p.w.")
      var price_div = document.createElement("div")
      price_div.className = 'image_box_prices'
      price_div.appendChild(prices)
            
      var div = document.createElement("div")
      div.appendChild(title_div)
      div.appendChild(price_div)   
      return div
   }
   

   
   this.createImageBox = function(i,mode) {
      if ( !mode ) {
         mode = 'right'
      }
      var div = document.createElement("div");
//      div.setAttribute("class",'image_box');
      div.className = 'image_box'
      div.setAttribute("id",'image_box_' + this.slider_data[i][0]);
      var title = this.create_title(this.slider_data[i][2],this.slider_data[i][3]);
      var title_link = this.create_title_link(this.slider_data[i][2],this.slider_data[i][3]);
      var img   = this.create_img(this.slider_data[i][1],'alt',title_link)
      
      var link = document.createElement("a")
      link.setAttribute("href",'/zoek/details/index.asp?villaid=' + this.slider_data[i][0])
      link.setAttribute("title",title_link)
//      link.setAttribute("class","geenkader")
      link.className = "geenkader"
      link.appendChild(img)
      
      var description = this.create_description(title,this.slider_data[i][4],this.slider_data[i][5])
      div.appendChild(link);
      div.appendChild(description);
      
    //  div.style.display = 'none'
      
      if ( mode == 'right' ) {
         this.container.appendChild(div)
      } else if ( mode == 'left' ) {
         this.container.insertBefore(div,this.container.firstChild)
      }
      
    //  new Effect.Appear(div.id)
   }
   
   this.createSlides = function(mode) {
      if ( !mode ) {
         mode = 'right'
      }
      
      if ( mode != this.last_mode ) {
         if ( mode == 'left' ) {
            this.current_index = this.current_index - this.columns + 1 
         } else if ( mode == 'right' ) {
            this.current_index = this.current_index + this.columns - 1
         }
      }
      
      for ( var i=1; i<=this.columns; i++ ) {
         
         if ( mode == 'right' ) {  
            this.current_index++       
            if ( this.current_index == this.slider_data.length-1 ) {
               this.current_index = 0;
            }
         } else if ( mode == 'left' ) { 
            this.current_index--
            if ( this.current_index < 0 ) {
               this.current_index = this.slider_data.length-1
            }
         }
         
         if ( ! this.slider_data[this.current_index] ) {
            this.debug("current_index: " + i + " does not exist")
         }
         
         this.createImageBox(this.current_index,mode)
         
         if ( !this.first_run ) {
            var slider_index = 0
            if ( mode == 'right' ) {
               slider_index = this.current_index - this.columns
               if ( slider_index < 0 ) {
                  slider_index = this.slider_data.length-1+slider_index
               }
            } else if ( mode == 'left' ) {
               slider_index = this.current_index + this.columns
               if ( slider_index > this.slider_data.length-1) {
                  this.debug("before: " + slider_index)
                  slider_index = slider_index-this.slider_data.length
                  this.debug("after: " + slider_index)
               }
            }
            this.removeSlide(slider_index)
         }
      }
      
      if ( this.first_run ) {
         this.first_run = false;
      }
      
      this.last_mode = mode      
      this.debug("curr: " + this.current_index )
   }
   
   this.removeSlide = function(i) {
      var slide = document.getElementById('image_box_' + this.slider_data[i][0])
      if ( !slide ) {
         this.debug("No slide: for image_box_" + i)
         this.current_image_boxes()
      } else {
         slide.parentNode.removeChild(slide)
      }
   }
   
   
   this.current_image_boxes = function() {
      this.debug("-----------")
      var imgs = this.container.getElementsByTagName("div");
      for ( var i=0; i<imgs.length; i++ ) {
         if ( imgs[i].getAttribute("id") && imgs[i].getAttribute("id").match(/image_box/) ) {
            this.debug("id: " + imgs[i].id)
         }
      }
      this.debug("-----------")
   }
   
   this.right = function(auto) {
      if ( !auto ) {
         this.end_show()
      }
      this.createSlides('right');
   }
   
   this.left = function(auto) {
      if ( !auto ) {
         this.end_show()
      }
      this.createSlides('left');
   }

   this.start_show = function() {
      this.right(true);
      this.interval = window.setInterval("thumbs.right(true)",5000)
   }
   
   this.end_show = function() {
      if ( this.interval ) {
         window.clearInterval(this.interval)
         this.interval = null
      }
   }
   
   this.debug = function(text,clear) {
      
      if ( this.debug_off ) {
         return true;
      }
      
     if (!clear) {
         clear = false
      }

      var debug   = document.getElementById('cms_debug')
      var console = document.getElementById('cms_debug_console')

      if ( !debug ) {
         clear = true
         debug = document.createElement('div')
         debug.setAttribute("id","cms_debug")
         debug.style.position = 'fixed'
         debug.style.width = '400px'
         debug.style.left = '0px'
         debug.style.top = '0px'
         debug.style.backgroundColor = '#333'
         debug.style.color = '#fff'
         debug.style.paddingTop = '5px'
         debug.style.paddingRight = '5px'
         debug.style.paddingBottom = '5px'
         debug.style.paddingLeft = '5px'
         debug.style.zIndex = '200'
         var clear_button = document.createElement("input")
         clear_button.setAttribute("type", "button")
         clear_button.setAttribute("value", "clear console")
         clear_button.style.cssFloat = 'right'

         clear_button.onclick = function() {
            thumbs.debug('',true)
         }

         debug.appendChild(clear_button)

         console = document.createElement('div')
         console.setAttribute("id","cms_debug_console")
         console.style.clear = "both"
         debug.appendChild(console)

         document.getElementsByTagName("body")[0].appendChild(debug)
      }

      if ( clear && ( text == '' ) ) {
         console.innerHTML = ''
      } else {
         if ( !clear ) {   
            console.appendChild(document.createElement('br'))
         }
         console.appendChild(document.createTextNode(text))
      }
   }
   
}