// JavaScript Document
$(document).ready(function() {
					
	   
	var currentPosition = 0;
	var slideWidth = 460;
	var slides_p = $('.slide_p');
	//var numberOfSlides_p = slides_p.length;
	var numberOfSlides_p = slides_p.length;
	
	$('#slides_Container').css('overflow', 'hidden');
   
	slides_p.wrapAll('<div id="slideInner"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });


 	$('#slideInner').css('width', slideWidth * numberOfSlides_p);
  
	$('#slide_show')
	  .prepend('<span class="control" id="leftControl">Moves left</span>')
	  .prepend('<span class="control" id="rightControl">Moves right</span>');

	function  manageControls(position){
  // position==0 is first slide
  if(position==0)  { $('#leftControl').hide(); }
  else { $('#leftControl').show(); }
    // numberOfSlides_p-1 is last slides
  if(position==numberOfSlides_p-1) {  $('#rightControl').hide(); }
  else { $('#rightControl').show(); }
}    
manageControls(currentPosition);
$('.control')
    .bind('click', function(){
    // 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)
    });
  });
	
	// 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_p-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	




 });