<div id="slideshowContainer">
  <div id="slideshow"> 
    <img class="first" src="http://placehold.it/680x390&text=[slide 1]" />
    <img src="http://placehold.it/680x390&text=[slide 2]" />
    <img src="http://placehold.it/680x390&text=[slide 3]" />
    <img src="http://placehold.it/680x390&text=[slide 4]" />
  </div><!--slideshow-->
  
  <div id="nav">
    <div id="prev"><a title="previous">&#60;</a></div>
    <div id="next"><a title="next">&#62;</a></div>
  </div><!--nav-->
</div><!--slideshowContainer-->

@import "compass";

#slideshowContainer {
  width: 682px;
  margin: 0 auto 0 auto;
  position: relative;
  padding: 0;
  z-index: 1000;
  
  #slideshow {
    height: 390px;
    padding: 0;
    position: relative;
    
    img {
      padding: 0;
      border: 0;
      width: 100%;
      max-height: 900px;
      position: absolute;
      z-index: 1001;
    }
  }
  
  #nav {
    display: block;
    width: 100%;
    background: #ff0000;
    list-style-type: none;
    z-index: 1002;
    
    li {
      a {
        display: block;
        width: 35px;
        height: 74px;
        text-indent: -9999px;
        outline: none;
        z-index: 1003;
      }
    }
    
    #prev {
      a {
        width: 35px;
        height: 74px;
        position: absolute;
        top: 150px;
        z-index: 1005;
        font-family: verdana;
        font-size: 50px;
        @include transition(color, 500ms, ease-in);
        left: 25px;
        
        &:hover {
          z-index:1005;
          color: #f28;
        }
      }
    }
    
    #next {
      a {
        width: 35px;
        height: 74px;
        position: absolute;
        top: 150px;
        z-index: 1005;
        font-family: verdana;
        font-size: 50px;
        @include transition(color, 500ms, ease-in);
        right: 25px;
        
        &:hover {
          z-index:1005;
          color: #f28;
        }
      }
    }
  }
}

#slideshow > * {
  display: none;
}

#slideshow > *.first {
  display: block;
}

$('#slideshow > *:first').addClass('active');
		
$('#slideshowContainer #next').click(function(e) {
  e.preventDefault();

  $('#slideshow > .active').fadeOut('slow');
		
	var index = $('#slideshow > *.active').index();
			
	if(index === $('#slideshow > *').size() -1) {
		index = -1;
	}
			
	$('#slideshow > .active').removeClass('active');
			
	var nextSlide = $('#slideshow > *').get(index + 1);  
	$(nextSlide).addClass('active');
			
	$('#slideshow > .active').fadeIn('slow');
});
		
$('#slideshowContainer #prev').click(function(e) {
	e.preventDefault();

	$('#slideshow .active').fadeOut('slow');
		
	var index = $('#slideshow img.active').index();
	
  if(index === 0) {
		index = $('#slideshow img').size();
	}
			
	$('#slideshow .active').removeClass('active');
			
	var prevSlide = $('#slideshow img').get(index - 1);  
	$(prevSlide).addClass('active');
			
	$('#slideshow .active').fadeIn('slow');
});