$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 505;
  var tabWidth = 25;
  var tabHeight = 30;
  var tabOverlap = 5;
  var slides = $('#slidesContainer .slide');
  var numberOfSlides = slides.length;

  //Various other CSS functions
  $('#slidesContainer').css({
		'overflow':'hidden',
		'width':slideWidth,
		'height':'261px',
		'background':'center url(./css/csspics/mid.png) repeat-x'
	});
  $('#slideshow').css('height','263px');
  $('#slidesContainer .slide').css({
		'margin':'16px 0',
		'height':'230px',
		'overflow':'auto'
	});
	//$('.breakTitle').css('display','none');


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

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

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span><span class="control2" id="leftControl2"></span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span><span class="control2" id="rightControl2"></span>');
  
  // Hide left arrow control on first load
  //manageControls(currentPosition);
	
	//Slider Tabs
	for(var i=0; i<numberOfSlides;i++){
		var inner = '';
		
		inner += '<div class="tab';
		if(i==0){inner += ' tabSelected';}
		inner += '"><div>' + (i+1) + '</div></div>';
		
		document.getElementById('sliderTabsContainer').innerHTML += inner;
	}
	$('.tab').each(function(){
		var tabNo=$(this).prevAll().size();
		$(this).css('left',tabNo*(tabWidth-tabOverlap));
	});
	$('.tab').css({
		'width':tabWidth,
		'height':tabHeight
	});
	
	function slideAnimate(slideNo){
		$('#slideInner').animate({'marginLeft':-(slideNo*slideWidth)},{queue:false},'slow');
		currentPosition=slideNo;
	}
	
	$('.tab').mouseenter(function(){
		var prevSize=$(this).prevAll().size();
		//Not totally necessary but nice to know
		//var curSlide=-(parseInt($('#slideInner').css('marginLeft')))/505;
		$('#slideInner').animate({'marginLeft':-(prevSize*slideWidth)},{queue:false},'slow');
		
	});
	$('.tab').click(function(){
		$('.tab').removeClass('tabSelected');
		$(this).addClass('tabSelected');
		var selectedSize=$(this).prevAll().size();
		slideAnimate(selectedSize);
	});
	$('.tab').mouseleave(function(){
		var selectedSize=$('.tabSelected').prevAll().size();
		slideAnimate(selectedSize);
	});

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
	
    // Move slideInner using margin-left
	if((currentPosition<=numberOfSlides-1)&&(currentPosition>=0)){
	    moveSlides();
	}
	if(currentPosition<0){
		currentPosition=numberOfSlides-1;
	    moveSlides();
	}
	if(currentPosition>numberOfSlides-1){
		currentPosition=0;
	    moveSlides();
	}
  });

	// Moves the slide to the new current position and updates the tabs
	function moveSlides(){
		$('#slideInner').animate({
		  'marginLeft' : slideWidth*(-currentPosition)
		});
		$('.tab').removeClass('tabSelected');
		$('.tab div').each(function(){
			if($(this).text() == currentPosition+1){
				$(this).parent().addClass('tabSelected');
			}
		});
	}
});