ThumbSlider = Class.create({
	REQUIRED_PROTOTYPE: '1.6.0.3',
	REQUIRED_SCRIPTACULOUS: '1.8.2',
	initialize: function(element, options) {
		
		element = $( element );
		this.element = element;
		this.options = options;
		this.options = Object.extend({
			timeout:8000, 
			data:null,
			thumb_w:100,
			thumb_h:75,
			width:562,
			height:421,
			pointer_offset:-15,
			pointer_step:60
		
		}, options || {});		
	
	
		this.main_ct    = new Element('div', { 'class': 'mainslide' });
		this.thumb_ct   = new Element('div', { 'class': 'halfslide' });
		this.image_ct   = new Element('div', { 'class': 'slideimage' });
		this.thumb_list = new Element('ul',  { 'class': 'thumbimg' });
		this.pointer    = new Element('div', { 'class': 'arrow', 'style' : 'visibility:visible;top:' + (this.options.pointer_offset+this.options.pointer_step) + 'px;'  });

		
		this.thumbs   = new Array();
		this.images	  = new Array();
		this.counter  = 0;
		
		
		this.thumb_ct.appendChild(this.thumb_list);
		this.thumb_ct.appendChild(this.pointer);
		
		this.main_ct.appendChild(this.thumb_ct);
		this.main_ct.appendChild(this.image_ct);
		
		this.element.appendChild(this.main_ct);
		
								
		
		this.createElements();
		
		this.start_sliding();
		
	},
	createElements:function(){
			if (this.options.data != null) {
				
				//this.items = this.options.data;
				//this.slide_count = this.items.length;
				
				this.slide_count = this.options.data.length;
				var i = 0;
				
				
				this.options.data.each(function(categories){
						var li;
						var li_div;
								
								
						if(i===0){
							li = new Element('li',  { 'class': 'first selected' });
							li_div = new Element('div',{ 'class': 'glow' });	
						}
						else if(i==(this.slide_count-1)){
							li = new Element('li',  { 'class': 'last' });
							li_div = new Element('div',{ 'class': '' });
						}
						else{
							li = new Element('li');
							li_div = new Element('div',{ 'class': '' });
						}
						
						this.thumbs[i] = li;

							
												
					
					var items = categories.items; 
					var j = 0;

					var textbox = new Element('div',{
						'class':'textbox ' + categories.category
					});	
									
					items.each(function(el){
						
							
						if (j === 0) {
							var thumb_div = new Element('div',{'class':'thumbimg_text'}).update(el.name);
							
							var a = new Element('a', {
								'title': el.title + (el.extratitle || ''),
								'href': el.href,
								'class': el.className || '',
								'rel' : (el.rel || '' ) 
							});
							
							
							a.observe('click',this.goto.bindAsEventListener(this, i));
							
							var thumb = new Element('img', {
								'height': this.options.thumb_h,
								'width': this.options.thumb_w,
								'alt': el.title,
								'title': el.title,
								'src': el.thumb
							});
							
							a.appendChild(thumb);
							li_div.appendChild(a);
							li_div.appendChild(thumb_div);
							li.appendChild(li_div);
							this.thumb_list.appendChild(li);
							
							
							if (i === 0) {
								var image_div = new Element('div', {
									'class': 'mnsld show'
								});
							}
							else {
								var image_div = new Element('div', {
									'class': 'mnsld'
								});
							}
							
							this.images[i] = image_div;
							
							var image_span = new Element('span', {
								'class': 'imgmap'
							});
							var image = new Element('img', {
								'height': this.options.height,
								'width': this.options.width,
								'alt': el.title,
								'src': el.img
							});
							
							

							
							var textbox_header = new Element('div',{
								'class':'textbox_header'
							});  
							textbox_header.update('<a href="'+categories.href+'" title="'+categories.title+'">'+categories.title+'</a>');

							var textbox_item   = new Element('div',{
								'class':'textbox_item first_item'
							});  
							
							textbox_item.update('<a href="'+el.href+'" onclick="'+el.onclick+'" title="'+el.title+'">'+el.title+'</a>');
							
							textbox.appendChild(textbox_header);
							textbox.appendChild(textbox_item);
							
							image_span.appendChild(image);
							image_div.appendChild(image_span);
							image_div.appendChild(textbox);
							this.image_ct.appendChild(image_div);
						}
						else{
							var textbox_item   = new Element('div',{
								'class':'textbox_item'
							});  
							textbox_item.update('<a href="'+el.href+'" onclick="'+el.onclick+'" class="'+(el.className || '')+'" rel="'+(el.rel || '' )+'" title="'+el.title + (el.extratitle || '') +'">'+el.title+'</a>');
														
							textbox.appendChild(textbox_item); 
							 
						}
						j++;
					}.bind(this));
					
					
					i++;
				}.bind(this));
				
				
				//alert(this.slide_count);

					//this.items = this.options.data.evalJSON(true);
					
			}		
	},
	start_sliding:function(){
		
		if (this.active==true) {
			return false;
		}
		
		var thisObj = this;
		this.timer = setTimeout(function() { thisObj.new_start(); }, this.options.timeout);
		
	},
	goto:function(event,slide){
		if(this.timer){
			clearTimeout(this.timer);
			this.timer = null;
		}

		this.thumbs[this.counter].removeClassName('selected');
		this.thumbs[this.counter].down(0).removeClassName('glow');
		this.images[this.counter].removeClassName('show');
		
		this.counter = slide;
		
		this.move_pointer(this.counter);
		
		this.thumbs[this.counter].addClassName('selected');
		this.thumbs[this.counter].down(0).addClassName('glow');
		this.images[this.counter].addClassName('show');		
		
		this.start_sliding();
	},
	new_start:function(){
				
		this.thumbs[this.counter].removeClassName('selected');
		this.thumbs[this.counter].down(0).removeClassName('glow');
		this.images[this.counter].removeClassName('show');
		
		this.counter++;
		if(this.counter == (this.slide_count)){
			this.counter = 0;
		}
		
		this.move_pointer(this.counter);

		this.thumbs[this.counter].addClassName('selected');
		this.thumbs[this.counter].down(0).addClassName('glow');
		this.images[this.counter].addClassName('show');		
		
		this.start_sliding();

	},
	move_pointer:function(slide){
		
		this.pointer.setStyle({'top': (this.options.pointer_offset + ((slide+1) * this.options.pointer_step)) + 'px' });

	}
	
});
	


/*
Nieuws	
	1
	2
	3
	
Sport
	1
	2
	3

Evenementen
	1
	2
	3
		
Video
	1
	2
	3
 */