$(document).ready(function(){
	var currentPosition = 0;
	var slideWidth = 698;
	var slides = $('.slide');
	var numberOfSlides = slides.length;
  // need to remove the scroll bar and stuffz
	$('.container').css('overflow', 'hidden');

  // encapsulating .slide with slideInner and stuffz...
	slides
	.wrapAll('<div id="slideInner"></div>')
	.css({
		'float' : 'left',
		'width' : slideWidth
	});

	// #slideInner is having its width set to the total width of all the slides and whatnot
	$('#slideInner').css('width', slideWidth * numberOfSlides);

	// adding the control buttons
	$('#page_bg_container')
		.append('<span id="leftControl_disabled"><img src="../../tpl/images/control_left_disabled.png"></span>')
		.append('<span class="control" id="leftControl"><img src="../../tpl/images/control_left.png"></span>')
	//creating my quick article square dot things...
	for(i = 0; i < numberOfSlides;i++)
	{
		$('#page_bg_container')
			.append('<div class="article" id="slice' + i + '"> <img src="../../tpl/images/article.png"> </div>')
			.append('<div class="article_disabled" id="dis_slice' + i + '"> <img src="../../tpl/images/article_disabled.png"> </div>');
			$('#slice' + i + '').hide(); 
	}
	$('#page_bg_container')
		.append('<span class="control" id="rightControl"><img src="../../tpl/images/control_right.png"></span>')
		.append('<span id="rightControl_disabled"><img src="../../tpl/images/control_right_disabled.png"></span>')
	var controlWidth = 50;
		var articles =  $('.article');
		var numberOfArticles = articles.length;
		$('#page_bg_container').css('width', controlWidth * (numberOfSlides + 2));

	manageControls(currentPosition);

  // event listener tieeemmmmmeeeee!!!!
	$('.control')
	.bind('click', function(){
	var direction;
	// Determine new position
	if($(this).attr('id')=='rightControl')
	{
		currentPosition += 1;
		direction = 1;
		
	}else{
		currentPosition -= 1;
		direction = 0;
	}
		manageControls(currentPosition,direction);

		$('#slideInner').animate({
		'marginLeft' : slideWidth*(-currentPosition)
		});
	});

	function manageControls(position,direction){

		$('#slice' + position + '').show(); 
		$('#dis_slice' + position + '').hide(); 
			
		  if(direction){
			  var lastSlide = position - 1;
			  $('#slice' + lastSlide + '').hide(); 
			  $('#dis_slice' + lastSlide + '').show(); 
		  }else{
			  var lastSlide = position + 1;
			  $('#slice' + lastSlide + '').hide(); 
			  $('#dis_slice' + lastSlide + '').show(); 
		  }
		if(position==0){ 
			$('#leftControl').hide();
			$('#leftControl_disabled').show(); 
			$('#slice0').show(); 
			$('#dis_slice0').hide(); 
		}
		else{ 
			$('#leftControl').show();
			$('#leftControl_disabled').hide(); 
			$('#slice0').hide(); 
			$('#dis_slice0').show(); 
		}
		
		if(position==numberOfSlides-1){ 
			$('#rightControl').hide();
			$('#rightControl_disabled').show();	
		}
		else{ 
			$('#rightControl').show();
			$('#rightControl_disabled').hide() 
			
		}
	}
	});