$(document).ready(function(){
	var slideShowTimeout = 6000;
	var play = true;
	var currentPosition = 0;
  	var slideWidth = 220;
  	var slides = $('.slide');
	var smallPreviews = $('.smallslide')
  	var numberOfSlides = slides.length;
  
  	var playBtn = '<img src="assets/btn_slide_play.png"/>';
	var pauseBtn = '<img src="assets/btn_slide_pause.png"/>';
 	var curBigSlide = 1;
  	var prevBigSlide = 1;
  	var bigslides = $('.bigslide');
  	var numberOfBigSlides = bigslides.length;

  	// Remove scrollbar in JS
  	$('#slidesContainer').css('overflow', 'hidden');

  	// Wrap all .slides with #slideInner div
  	slides.wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
		.css({ 'float' : 'left', 'width' : slideWidth
    });

  	// Set #slideInner width equal to total width of all slides
  	$('#slideInner').css('width', slideWidth * numberOfSlides);

  	// Hide left arrow control on first load
  	manageControls(currentPosition);

  	// Create event listeners for .controls clicks
  	$('.control').bind('click', function() {
		//when clicks on the controls -> stop timer
		stopTimer();
    	// Determine new position
		currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
		// Hide / show controls
    	manageControls(currentPosition);
    	// Move slideInner using margin-left
    	$('#slideInner').animate({
      		'marginLeft' : slideWidth*(-currentPosition)
    	});
  	});
  
  	//bind click on every smallslide div
  	$('.smallslide').bind('click', function(){
		stopTimer();
		//find key of smallslide
		var key = $(this).attr('id');	
		var a_keys = key.split('_');
		//now change big preview with the id
		curBigSlide = parseInt(a_keys[1]);
		changePreview(curBigSlide, prevBigSlide);
		prevBigSlide = a_keys[1];
  	});
  
  	//in witch slide (preview of 3 divs) is the current preview
  	function calculateSlide(cur) {
		var i = 0;
     	for (i=0;i<=numberOfSlides;i++) {
			var vstart = i*3;
		 	var vstop = (i+1)*3;
		 	if ( (cur <= vstart) && (cur < vstop) ) {
				return i-1;	 
		 	}
	 	}
  	}

	// manageControls: Hides and Shows controls depending on currentPosition
	function manageControls(position){
		// Hide left arrow if position is first slide
		if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
		// Hide right arrow if position is last slide
		if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
	}
  
    $('#smallslide_1').css({'border-color' : '#DDD100', 'border-width' : '1px', 'border-width' : '1px', 'filter' : 'alpha(opacity=100)', 
							'-moz-opacity' : '1', '-khtml-opacity' : '1', 'opacity' : '1'  });

  	startTimer();
	//start automatic --> this function is executes every x seconds
	function startTimer() {
		if (smallPreviews.length>1) {
			play = true;
			$('.auto').html(pauseBtn);
			$('.auto').everyTime(slideShowTimeout, 'controlled', function() {
				if (curBigSlide == numberOfBigSlides)	 {										
					curBigSlide = 1 ;
				} else {
					curBigSlide = curBigSlide+1 ;
				}
				changePreview(curBigSlide, prevBigSlide);
				prevBigSlide = curBigSlide;
			});
		} else {$('.auto').html("");}
	}
	
	$('.auto').click(function() {
		if (play) {
			stopTimer();
		} else {
			startTimer();
		}
	});
  	
	//changes the preview of the slide
  	function changePreview(cur, prev) {
		var html = $('#bigslide_' + cur).html();
		var sl = calculateSlide(cur);
		if (currentPosition != sl) {
				currentPosition = sl;
				manageControls(currentPosition);
				$('#slideInner').animate({
					'marginLeft' : slideWidth*(-currentPosition)
				}); 
		}
		$('#pt_preview').html(html);
		$('#smallslide_' + prev).css({'border-color' : '#FFFFFF', 'border-width' : '1px', 'filter' : 'alpha(opacity=50)', 
									  '-moz-opacity' : '0.5', '-khtml-opacity' : '0.5', 'opacity' : '0.5' });
		$('#smallslide_' + cur).css({'border-color' : '#DDD100', 'border-width' : '1px', 'filter' : 'alpha(opacity=100)', 
									  '-moz-opacity' : '1', '-khtml-opacity' : '1', 'opacity' : '1' });
		$('#pt_preview div:first').fadeIn('slow');
		setTimeout("waitAndSlide()", 250);  
  	}
	
	//drop the innertext of the preview
   	function waitAndSlide() { 
		$('#txt_preview').slideDown('fast');
  	}
	
  	//stop timer binded aan auto class
  	function stopTimer() {
		if (smallPreviews.length>1) {
		play = false;
		$('.auto').stopTime('controlled');
		$('.auto').html(playBtn);
		} else {$('.auto').html("");}
	}
	
});