$(document).ready(function(){
// Common vars
  var delay = 5000;

  // Outer vars
  var currentPosition = 0;
  var slideWidth = 706;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  var isMoving = 0;
  var moved = 0;

  // Inner vars
  var inner_currentPosition = 0;
  var inner_slideHeight = 292;
  var inner_slides = $('.inner_slide');
  var inner_numberOfSlides = inner_slides.length;
  var inner_isMoving = 0;
  var inner_moved = 0;
  var inner_t = 0;

  // Remove scrollbar in JS
  // Outer
  $('#slidesContainer').css('overflow', 'hidden');
  // Inner
  $('#inner_slidesContainer').css('overflow','hidden');

  // slides setup
  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth,
      'opacity' : 1.0
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Wrap Inner slides with #inner_slideInner
  inner_slides.wrapAll('<div id="inner_slideInner"></div>').css({
     'height' : inner_slideHeight,
     'opacity' : 1.0
  })

  // Set #inner_slideInner height equal to total height of all inner_slides
  $('#inner_slideInner').css('height', inner_slideHeight * inner_numberOfSlides);

  // Insert controls in the DOM
  // Outer
  $('#slideshow')
    .append('<span class=navbar></span>')

  $('.navbar')
    .append('<span class="control" id="rightControl">Clicking moves right</span>')
    .append('<span class="counter"></span>')
    .append('<span class="control" id="leftControl">Clicking moves left</span>')

  // Inner
  $('#inner_slideshow')
    .append('<span class="inner_control" id="inner_rightControl"></span>')
    .append('<span class="inner_control" id="inner_leftControl"></span>')


  // Set width of counterbar according to the number of slides
  $('.counter').css({
      'width' : numberOfSlides*11,
      'background-position': -110
  });

  // Binding mouseclick to controls
  $('.control')
     .bind('click', function(){
        if(!isMoving && $(this).attr('id')=='rightControl'){
            currentPosition = currentPosition+1;
            move();
        }

        if(!isMoving && $(this).attr('id')=='leftControl'){
            if(currentPosition == 0)
                currentPosition = numberOfSlides-1;
            else
                currentPosition = currentPosition-1;
            move();
        }
    })

  $('.inner_control')
    .bind('click', function(){
        if(!inner_isMoving && ($(this).attr('id')=='inner_rightControl')){
            inner_currentPosition = inner_currentPosition+1;
            inner_move();
            }

        if(!inner_isMoving && ($(this).attr('id')=='inner_leftControl')){
            if(inner_currentPosition == 0){
                inner_currentPosition = 0;
            }
            else{
            inner_currentPosition = inner_currentPosition-1;
            }
            inner_move();
        }
    })

  //Delay start with x delay
  $('start_moving')
      setTimeout(outer_autoMove,delay);
      setTimeout(inner_autoMove,delay);

  // Calculate position and move slideInner and counterbar using margin left
  function move(){
      isMoving=true;
            if(currentPosition == numberOfSlides){
             currentPosition = currentPosition-numberOfSlides;
            }
    fade_out();
    $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
    })

    $('.counter')
       .css('background-position', -11*(10-currentPosition))
    fade_in();
    isMoving=false;
    moved++;
  };

  // Calculate position and move inner_slideInner using margin top
  function inner_move(){
      inner_isMoving=true;
        if(inner_currentPosition == inner_numberOfSlides){
            inner_currentPosition = inner_currentPosition-inner_numberOfSlides;
        }

      inner_fade_out()
      setTimeout(func_2nd,500)
  }

  function func_2nd(){
      inner_mover()
      inner_fade_in()
      inner_isMoving=false;
      inner_moved++;
      clearTimeout(inner_t);
      inner_t=setTimeout(inner_autoMove,delay);
  }

  function inner_mover(){
            $('#inner_slideInner').css({
          'marginTop' : inner_slideHeight*(-inner_currentPosition)
      })
  }

  // Fading functions
  function fade_in(){
      $('#slideInner').fadeTo('1000',1.0)
  }

  function inner_fade_in() {
      $('.slideimg').fadeTo('1000',1.0)
  }

  function fade_out(){
      $('#slideInner').fadeTo('1000',0.0)
  }

  function inner_fade_out(){
      $('.slideimg').fadeTo('1000',0.2)
  }

  // Outer auto mover with moving delay
  function outer_autoMove(){
      if(moved<numberOfSlides-1 && !isMoving){
        currentPosition = currentPosition +1;
        move();
        setTimeout(outer_autoMove,delay);
    }
  }

  // Inner auto mover (moving delay is in the function move())
  function inner_autoMove(){
    if(!inner_isMoving)
      inner_currentPosition = inner_currentPosition+1;
      inner_move();
  }
});