$(function(){

  $('#sliderimages').css('opacity',0)

  var sliderHeight = $('#slider').height();
  var sliderWidth = $('#slider').width();
  var inactiveSize = 0.6;
  var hiddenSize = 0.4;
  var opacityLevel = 1;
  var sliderSpeed = 500;
  var allowClick = true;
  var imagesLoaded = 0;
  var imgCount = $('#sliderimages img').size()

  ActivateSlider = function(){
    $('#slider .loading').animate({ opacity:0 }, '800')
    $('#slider #sliderimages').animate({ opacity:1 }, '800')

    $('#sliderimages .image').each(function(){
      $(this).css({ opacity:0 })
    })

    if(imgCount == 1){
      $('#sliderimages .image:first').addClass('current')
    }else if(imgCount > 1){
      $('#sliderimages .image:first').next().addClass('current')
    }else{
      $('#slider').css('display','none')
    }

    var current = $('#sliderimages .current');
    var next = current.next()
    var prev = current.prev()

    current.css({ left:((sliderWidth - current.width()) / 2), opacity:1 })
    next.css({ left:(sliderWidth - (next.attr('rel') * inactiveSize)), top:((sliderHeight - (sliderHeight * inactiveSize)) / 2), height:(sliderHeight * inactiveSize), width:(next.attr('rel') * inactiveSize), opacity:opacityLevel })
    prev.css({ height:(sliderHeight * inactiveSize), top:((sliderHeight - (sliderHeight * inactiveSize)) / 2), width:(prev.attr('rel') * inactiveSize), opacity:opacityLevel })
  }

  SetActive = function(image){
    image.css({ zIndex:9 }).animate({ left:((sliderWidth - image.attr('rel')) / 2), top:0, height:sliderHeight, width:(image.attr('rel')), opacity:1 }, sliderSpeed, function(){
      $(this).addClass('current')
    })
  }

  MoveCurrent = function(current,direction){
    var leftPosition = 0
    if( direction == false ){
      leftPosition = (sliderWidth - (current.attr('rel') * inactiveSize))
    }
    current.css({ zIndex:8 }).animate({ left:leftPosition, top:((sliderHeight - (sliderHeight * inactiveSize)) / 2), height:(sliderHeight * inactiveSize), opacity:opacityLevel, width:(current.attr('rel') * inactiveSize) }, sliderSpeed, function(){
      $(this).removeClass('current')
    })
  }

  AddToEdge = function(moveThis,direction){
    var leftPosition = 0
    if( direction == true ){
      leftPosition = (sliderWidth - (moveThis.attr('rel') * inactiveSize))
    }
    moveThis.css({ zIndex:8, opacity:0 }).animate({ left:leftPosition, top:((sliderHeight - (sliderHeight * inactiveSize)) / 2), height:(sliderHeight * inactiveSize), width:(moveThis.attr('rel') * inactiveSize), opacity:opacityLevel }, sliderSpeed, function(){
      allowClick = true;
    })
  }

  GetPrevious = function(currentImage){
    var previous = currentImage.prev('.image')
    if(previous && !previous.hasClass('image')){
      previous = $('#sliderimages .image:last')
    }
    return previous;
  }

  GetNext = function(currentImage){
    var next = currentImage.next('.image')
    if(next && !next.hasClass('image')){
      next = $('#sliderimages .image:first')
    }
    return next;
  }

  HideOtherImages = function(doNotHide){
    for(var i=0; i<doNotHide.length; i++){
      doNotHide[i] = doNotHide[i].attr('id')
    }
    $('#sliderimages .image').each(function(){
      var used = jQuery.inArray( $(this).attr('id'), doNotHide )
      if( used == -1 ){
        $(this).css({ zIndex:7 }).animate({ left:((sliderWidth - ($(this).attr('rel') * hiddenSize)) / 2), height:(sliderHeight * hiddenSize), width:($(this).attr('rel') * hiddenSize), opacity:0 }, sliderSpeed)
      }
    })
  }

  // controls
  if( $('#sliderimages img')[0].complete == true ){
    $('#sliderimages img').each(function(){
      $(this).attr('rel', $(this).width() )
    })
    ActivateSlider()
  }
  else{
    $('#sliderimages img').bind('load', function(){
      $(this).attr('rel', $(this).width() )
      imagesLoaded++;
      if( imagesLoaded == imgCount ){
        ActivateSlider()
      }
    })
  }

  $('#slider .next').click(function(){
    if( allowClick == true ){
      allowClick = false;
      var current = $('#sliderimages .current')
      var next = GetNext(current)
      var newNext = GetNext(next)
      HideOtherImages( [current,next,newNext] )
      MoveCurrent(current,true)
      SetActive(next)
      AddToEdge(newNext,true)
    }
  })

  $('#slider .prev').click(function(){
    if( allowClick == true ){
      allowClick = false;
      var current = $('#sliderimages .current')
      var prev = GetPrevious(current)
      var newPrev = GetPrevious(prev)
      HideOtherImages( [current,prev,newPrev] )
      MoveCurrent(current,false)
      SetActive(prev)
      AddToEdge(newPrev,false)
    }
  })

})