// JavaScript Document
// Slideshow
// Author: Dr Matthew Ager | Doctor of Mathematics and Web Developer | Skopje


$(document).ready(function() {
	
	var windowWidth = $(window).width();
	var currentPosition = 0;
	var slideWidth = $('#slideshow').width();
	var slideHeight = $('#slideshow').height();
	var numberOfSlides = $('#slidesContainer .slide').length;
	$('#measure').html(numberOfSlides);
	
// create the correct number of links for the slideshow navigator from 1 to numberOfSlides
	function appendToContainer(container, newNode, loop){
		newNode
     		.text(loop);
  		container
    		.append(newNode); 
	}

	for(i=1;i<=numberOfSlides;i++) {
   		var template = $("<a href='#'></a>");
		$('#slidesNavigatorContainer a').attr('rel', i);
   		appendToContainer($('#slidesNavigatorContainer'), template, i);
	}

// give each navigator link a "rel" identification
	$('#slidesNavigatorContainer a')
		.each(function(){
    		var contents = $(this).html();
    		$(this).attr('rel', contents);
		})

// give all the navigator links the "navigatorButton" class
	$('#slidesNavigatorContainer')
		.find('a')
		.addClass('navigatorButton');

// wrap all the navigator buttons in a div
	$('#slidesNavigatorContainer a')
		.wrapAll('<div class="slidesNavigator" />');

	var navigatorWidth = $('.slidesNavigator').width();

	$('.slidesNavigator')
		.css({
			 'marginLeft': "200px"
		});

// give the first navigator button the "active" class
	$('.slidesNavigator a:first')
		.addClass('active');

// Get number of times and the distance to slide, update the active position and animate
	rotate = function() {
		var triggerID = $active.attr('rel') - 1;
		var slidesPosition = triggerID * slideWidth;
		$('.slidesNavigator a').removeClass('active');
		$active.addClass('active');
		$('#slidesInner').animate({marginLeft: -slidesPosition}, 1000);
	};

//Set timer and move to the next .slidesNavigator; if slidesNavigator reaches the end go back to the beginning. Trigger functions and update currentPosition and show/hide controls appropriately
	rotateSwitch = function() {
		play = setInterval(function() {
			$active = $('.slidesNavigator a.active').next();
			if($active.length === 0) {
				$active = $('.slidesNavigator a:first');
			}
			rotate();
			currentPosition = $active.attr('rel') - 1;
			manageControls(currentPosition);
			$('#measure2').html(currentPosition);
		}, 6000);
	};
	
	rotateSwitch();

// If you click a navigator button: set the one you click as active, update currentPosition and show/hide controls appropriately, move to the correct slide and restart timer
	$(".slidesNavigator a").click(function() {
    	$active = $(this);
		currentPosition = $active.attr('rel') - 1;
		manageControls(currentPosition);
		$('#measure2').html(currentPosition);
    	clearInterval(play);
    	rotate();
    	rotateSwitch();
    	return false;
	});

	
// create the start, stop and reset buttons
	$('.slidesNavigator')
		.append('<span id="start"></span>')
		.append('<span id="stop"></span>')
		.append('<span id="reset"></span>');

// Restart timer
	$('#start')
		.addClass('on')
		.html("start")
		.css({
			 'cursor': 'pointer',
		})
		.click(function() {
			clearInterval(play);
			rotateSwitch();
		});

// Stop timer
	$('#stop')
		.addClass('off')
		.html("stop")
		.css({
			 'cursor': 'pointer'
		})
		.click(function() {
			clearInterval(play);
		});

// Stop timer, moveback to the initial conditions and restart timer
	$('#reset')
		.addClass('off')
		.html("reset")
		.css({
			 'cursor': 'pointer'
		})
		.click(function() {
			clearInterval(play);
			$('.slidesNavigator a').removeClass('active');
			$('.slidesNavigator a:first').addClass('active');
			currentPosition = 0;
			manageControls(currentPosition);
			$('#measure2').html(currentPosition);
			$('#slidesInner').animate({'marginLeft': "0px"});
		});

	$('#start.on')
		.bind('click', (function() {
		}));

	$('#stop.off')
		.bind('click', (function() {
		}));
			
	$('#reset.off')
		.bind('click', (function() {
		}));
		
// create the left and right controls
	$('.slidesNavigator')
		.append('<span class="control" id="leftControl">Clicking moves left</span>')
		.append('<span class="control" id="rightControl">Clicking moves right</span>');

// hide the scrollbars
	$('#slidesContainer')
		.css('overflow', 'hidden');

// wrap all slides in a div and float them left
	$('.slide')
		.wrapAll('<div id="slidesInner" />')
		.css({
			 'float': 'left',
			 'width': slideWidth
		});

// increase size of slides wrap to allow slides to sit horizontally
	$('#slidesInner')
		.css({
			 'width': slideWidth * numberOfSlides
		});

// set hide left control on load
	manageControls(currentPosition);

// bind click event to controls, update which controls are visible and animate slide
	$('.control')
		.bind('click', function() {
			if($(this).attr('id')=='rightControl') {
				$active = $('.slidesNavigator a.active');
				clearInterval(play);
				currentPosition += 1;
				$('.slidesNavigator a').removeClass('active');
				$active.next().addClass('active');
			} else {
				$active = $('.slidesNavigator a.active');
				clearInterval(play);
				currentPosition -= 1;
				$('.slidesNavigator a').removeClass('active');
				$active.prev().addClass('active');
			}
			manageControls(currentPosition);
			$('#measure2').html(currentPosition);
			$('#slidesInner')
				.animate({
					'marginLeft': (-currentPosition) * slideWidth
				});
			});

// function to determine which controls should be visible
	function manageControls(position) {
		if(position==0){
			$('#leftControl').hide()
		} else {
			$('#leftControl').show()
		}
		if(position==numberOfSlides-1){
			$('#rightControl').hide()
		} else {
			$('#rightControl').show()
		}
	}

	$('#leftControl img, #rightControl img')
		.css({
			'height': slideHeight
	});

});