$(function(){
   var hs = new htmlSlider();
   $('.slideDesc,.slideHeader').fadeTo('fast',0.8);
   $('#nextSlide').click(function(){
    hs.nextSlide();
	return false;
   });
   
    $('#prevSlide').click(function(){
    hs.prevSlide();
	return false;
   });
   
   $('.slideDesc,.slideHeader').hover(
	 function(){
		  $(this).fadeTo('fast',1.0)
		
	 },
     function(){
		 $(this).fadeTo('fast',0.7)
	 }
   );
 
      
});


function htmlSlider(){
	
	/* HTML example
	
    <div id="sliderContainer">
	 <a id="nextSlide" href="#"></a>
	 <a id="prevSlide" href="#"></a>
	 <div id="slidesWrap">
		 <div id="slides">
		  <div class="slide">Slide 1</div>
		  <div class="slide">Slide 2</div>
		  <div class="slide">Slide 3</div>
		 </div>
	 </div>
	</div>
	
	*/
	
     this.slideWidth = 595;
	 this.numberOfSlides = $('.slide').size();
	 this.totalSlidesLenght = this.slideWidth * this.numberOfSlides;
	 
	 this.nextSlide = function(){
	  if(this.totalSlidesLenght > this.slideWidth)
	  {
		  $('#slides').animate({left:"-="+this.slideWidth+"px"},750);
		  this.totalSlidesLenght-=this.slideWidth;
	  }
	 }//method
	 
	 this.prevSlide = function(){
	  if(this.totalSlidesLenght < this.slideWidth * this.numberOfSlides)
	  {
		  $('#slides').animate({left:"+="+this.slideWidth+"px"},750);
		  this.totalSlidesLenght+=this.slideWidth;
	  }
	 
	 }//method
	 
}