$(window).load(function(){
  $('#banner #dummy').fadeOut("slow");
});

$(document).ready(function() {
  
  $('#banner').prepend($('<div id="dummy" style="background: #ccc; position: absolute; top: 0; left: 0; width: 607px; height: 223px; z-index: 10000; float: left"></div>'));
  
  $('#mask #slides').each(function() {
    
    $('#mask #slides .slide').each(function(i) {
      $('#dots').append('<span class="dot ' + i + '">●</span>');
    });
    
    $('#dots .dot.' + 0).css({'color': '#ccc'});
    
		var $container = $(this);
		    
    var pause;
		var currentSlide = 0;
		var slideCount = $('div.slide').length;
		var slideWidth = $('#mask').width();
		var rotateInProgress = false;
		var mouseHovered;
		
		var fadeWidth = 20;
    for (var xPos = 0; xPos < fadeWidth; xPos += 2) {
      $('<div></div>')
        .css({
          left: xPos,
          opacity: 1 - xPos / fadeWidth
        })
        .addClass('fade-slice')
        .appendTo($('#mask'));
    };
    
    for (var xPos = slideWidth; xPos > slideWidth - fadeWidth; xPos -= 2) {
      $('<div></div>')
        .css({
          left: xPos - 2,
          opacity: 1 - (slideWidth - xPos) / fadeWidth
        })
        .addClass('fade-slice')
        .appendTo($('#mask'));
    }
		
		$container.css('width', slideWidth * slideCount);
		
		var slide = function() {
		  if (!rotateInProgress) {
		    rotateInProgress = true;
		    runSlide = false;
  		  currentSlide = (currentSlide + 1) % slideCount;
  		  changePicture(currentSlide);
  		  if (currentSlide != 0 ) {
  		    $container.animate(
    		    {left: 0 - currentSlide * slideWidth}, 'slow', function() {
    		      if (!runSlide && !mouseHovered) {
    		        runSlide = setTimeout(slide, 5000);
    		      } 
    		      rotateInProgress = false;
    		      $('#dots .dot').css({'color': '#666'});
    		      $('#dots .dot.' + currentSlide).css({'color': '#ccc'});
    		  });
  		  } else {
  		    $container.animate(
    		    {opacity: 0}, 'normal', function() {
    		      $(this).css({'left': 0 - currentSlide * slideWidth, 'opacity': 1}).hide().fadeIn(function() {
                if($.browser.msie)
                  this.style.removeAttribute('filter');
              });
    		      if (!runSlide && !mouseHovered) {
    		        runSlide = setTimeout(slide, 5000);
    		      } 
    		      rotateInProgress = false;
    		      $('#dots .dot').css({'color': '#666'});
    		      $('#dots .dot.' + currentSlide).css({'color': '#ccc'});
    		  });
  		  };
		  };
		};
		

		
		var zed = 5;
		$('#set-1').css({'z-index': 5});
		
		var changePicture = function(slide) {
		  $('#set-' + (slide + 1)).css({'z-index': zed}).hide().fadeIn('slow');
		  zed = zed + 1;
		};
		
		var runSlide = setTimeout(slide, 5000);
		$container.hover(function() {
		  clearTimeout(runSlide);
	    runSlide = false;
	    mouseHovered = true;
		}, function() {
	    if(!runSlide) {
		    runSlide = setTimeout(slide, 5000);
	    }
	    mouseHovered = false;
		});
		
	});
	
	
});