/*
 * LabCinema Content Slider
 * author: Andrey Artemov
 * mail: 5e-1@m207.ru
 * 
 * */

document.documentElement.className = 'js';

(function($){
/*
 * Slider Object
 * 
 */
var Slider = {
  animated: false,

  speed: 1600,

  balloonSpeed: 2000,

  //positionLeft: '60px', // 0
  
  slide_to: function($slide, offsetleft, classname, func) {
    $('div.descr, div.text, div.pic', $slide).each(function(){
      $(this).css('left', $(this).position().left);
    });
    $('div.descr, div.text, div.pic', $slide).animate({left: offsetleft}, this.speed, function() {
      $slide.removeClass('current');
      $slide.addClass(classname);
      $('div.descr, div.text, div.pic', $slide).css('left', '');

      func = func || '';
      if (func.constructor == Function) {
        func();
      }
    });
  },

  slide_to_left: function($slide, func) {
    /* slide1 */
    if ($slide.is('#slide1')) {
      $('div.balloon img', $slide).animate({width: '20%', height: '20%'}, this.balloonSpeed);
      $('div.balloon', $slide).animate({top: '-550px' /*, left: '50%'*/ }, this.balloonSpeed);
    }
    /* /slide1 */
    //this.slide_to($slide, '-150%', 'prev', func);
    this.slide_to($slide, -$slide.width()*1.5, 'prev', func);
  },

  slide_to_right: function($slide, func) {
    //this.slide_to($slide, '150%', 'next', func);
    this.slide_to($slide, $slide.width()*1.5, 'next', func);
  },

  slide_from_right: function($slide, func) {
    var $pic = $('div.pic', $slide);
    var picl = $pic.position().left;

    var $text = $('div.text', $slide);
    var textl = $text.position().left;

    $('div.descr, div.text', $slide).css('left', '0');
    $pic.css('left', $pic.width()/2+'px');
    $text.animate({left: textl}, this.speed);
    $pic.animate({left: picl}, this.speed);
    $slide.css('left', $slide.position().left);
    $slide.animate({left: 0}, this.speed, function() {
      $slide.css('left', '');
      $slide.removeClass('next');
      $slide.addClass('current');
      $('div.descr, div.text, div.pic', $slide).css('left', '');

      func = func || '';
      if (func.constructor == Function) {
        func();
      }
    });
  },

  slide_from_left: function($slide, func) {
    /* slide1 */
    if ($slide.is('#slide1')) {
      $('div.balloon img', $slide).animate({width: '100%', height: '100%'}, this.balloonSpeed);
      $('div.balloon', $slide)
        .css('left', '150%')
        .animate({top: '-150px'}, this.balloonSpeed)
        .animate({left: '50%'}, {queue:false, duration: this.speed});
    }
    /* / slide1 */

    var w = $slide.width();

    var $descr = $('div.descr', $slide);
    var descrl = $descr.position().left;

    var $pic = $('div.pic', $slide);
    var picl = $pic.position().left;

    $descr.css('left', w-$descr.width());
    $pic.css('left', w-$pic.width());

    $descr.animate({left: descrl}, this.speed);
    $pic.animate({left: picl}, this.speed);
    $slide.css('left', $slide.position().left);
    //$slide.animate({left: 0}, this.speed, function() {
    $slide.animate({left: 0}, this.speed, function() {
      $slide.css('left', '');
      $slide.removeClass('prev');
      $slide.addClass('current');
      $('div.descr, div.text, div.pic', $slide).css('left', '');

      func = func || '';
      if (func.constructor == Function) {
        func();
      }
    });
  },

  get_id: function(el) {
    return $(el).attr('id').substr(5, 1);
  },

  exist_next: function() {
    return $('div.next').size();
  },

  exist_prev: function() {
    return $('div.prev').size();
  },

  hide_nav: function() {
    this.animated = true;
    $('#next-link, #prev-link').hide();
    $('div.slidenav li.current').removeClass('current');
    //$('div.slidenav').addClass('animated');
    $('div.slidenav').css('opacity', .5);
  },

  show_nav: function() {
    if (this.exist_prev()) {
      $('#prev-link').fadeIn('slow');
    }
    if (this.exist_next()) {
      $('#next-link').fadeIn('slow');
    }
    // slidenav
    var id = this.get_id($('div.slides div.current'));
    $('div.slidenav a[href$='+id+']').parent().addClass('current');
    //$('div.slidenav').removeClass('animated');
    $('div.slidenav').css('opacity', '');

    this.animated = false;
  },

  slide: function($from, to) {
    if (!this.animated) {
      var from = this.get_id($from), $to, self;
      if (from < to) {
        // left
        $to = $('#slide'+to);
        this.hide_nav();
        this.slide_to_left($from);
        self = this;
        this.slide_from_right($to, function(){
          $to.prevAll('div.slide').removeClass('next').addClass('prev');
          $to.nextAll('div.slide').removeClass('prev').addClass('next');
          self.show_nav();
        });
      }
      else if (from > to) {
        // right
        $to = $('#slide'+to);
        this.hide_nav();
        this.slide_to_right($from);
        self = this;
        this.slide_from_left($to, function(){
          $to.prevAll('div.slide').removeClass('next').addClass('prev');
          $to.nextAll('div.slide').removeClass('prev').addClass('next');
          self.show_nav();
        });
      }
    }
  },

  slide_next: function($slide) {
    if (this.exist_next() && !this.animated) {
      this.hide_nav();
     
      this.slide_to_left($slide);
      
      $slide = $slide.next('div.slide');

      var self = this;
      this.slide_from_right($slide, function(){
        self.show_nav();
      });
    }
  },

  slide_prev: function($slide) {
    if (this.exist_prev() && !this.animated) {
      this.hide_nav();
      this.slide_to_right($slide);

      $slide = $slide.prev('div.slide');

      var self = this;
      this.slide_from_left($slide, function(){
        self.show_nav();
      });
    }
  }
};
 
$(document).ready(function() {
  //$('#slide1').addClass('current').nextAll('div.slide').addClass('next');
  //
  $('#slide2 img').wrap('<div></div>');
  $('#slide3 img').wrap('<div></div>');
  $('#slide5 img').wrap('<div></div>');
  $('#slide6 img').wrap('<div></div>');
  $('#slide7 img').wrap('<div></div>');
  //←
  var $slidenav = $('<div class="slidenav"></div>').appendTo($('div.wrapper'));
  $slidenav.append('<a class="prev-link" id="prev-link" href="#/prev" style="display:none;">←<span>Ctrl+←</span></a><a class="next-link" id="next-link" href="#/next" style="display:none;">→<span>Ctrl+→</span></a>');
  // slidenav
  var $nav = $('<ul></ul>').appendTo($slidenav);
  $('div.slide').each(function() {
    var id = Slider.get_id(this);
    $nav.append('<li><a href="#/slide/'+id+'"><img src="i/icon'+id+'.png" alt="slide'+id+'" width="58" height="48" /></a></li>');
  });
  $('[href$=1]', $nav).parent().addClass('current');
  //
  var img = new Image();
  img.onload = function(){
    // IE 6
    $('#slide1 .balloon img').css('behavior', 'url(css/iepngfix.htc)');
    $('#slide1 .balloon img').attr('src', 'i/balloon.png');
    Slider.show_nav();
  }
  img.src = 'i/balloon.png';
  //
  
  $('a.next-link').click(function(){
    Slider.slide_next($('div.slides div.current'));
    return false;
  });

  $('a.prev-link').click(function(){
    Slider.slide_prev($('div.slides div.current'));
    return false;
  });

  $('a', $nav).click(function(){
    Slider.slide($('div.slides div.current'), $(this).attr('href').split('/').slice(-1));
    return false;
  });

  $(document).keyup(function(e){
    if (e.ctrlKey) {
      switch(e.keyCode){
        case 37:
          Slider.slide_prev($('div.slides div.current'));
          break;
        case 39:
          Slider.slide_next($('div.slides div.current'));
          break;
      }
    }
  });

  if ($nav.magnifier) {
    $nav.magnifier({distance: 100, magnification: 1.3});
  }
});
}(jQuery));