var Popel = Popel || { 'settings': {}, 'behaviors': {}, 'themes': {}, 'locale': {} };

Popel.jsEnabled = document.getElementsByTagName && document.createElement && document.createTextNode && document.documentElement && document.getElementById;

Popel.attachBehaviors = function(context) {
  context = context || document;
  if (Popel.jsEnabled) {
    // Execute all of them.
    jQuery.each(Popel.behaviors, function() {
      this(context);
    });
  }
};

$(document).ready(function() {
  Popel.attachBehaviors(this);
});

Popel.behaviors.SlidePanels = function(context){
  $('.slide-content .media .images:not(.images-processed)').each(function(indxfiles){
    var $imgcont = $(this);
    var $imgs = $('.image', $imgcont);
    
    if($imgs.length < 3) return;

    var prev = $('<div id="media-' + indxfiles + '-prev" class="slidepanel-prev nav"></div>')
      .click(Popel.behaviors.SlidePanels.prev);;
    var next = $('<div id="media-' + indxfiles + '-next" class="slidepanel-next nav"></div>')
      .click(Popel.behaviors.SlidePanels.next);
    $imgcont.parent().append(prev).append(next);
    $('.nav', $imgcont.parent()).hide().fadeIn(1500);
    
    
    var totalcount = $imgs.length;
    var totalwidth = 0;
    var widths = new Array();
    
    var firstShown;
    var firstSwitched;
    
    $imgs.each(function(indx){
      totalwidth += $(this).outerWidth(true);

      if(indx == 0){
        firstShown = $(this);
      } else if(indx == totalcount-1){
        firstSwitched = $(this);
        $('img', $(this)).css({opacity: .4});
        $(this).click(Popel.behaviors.SlidePanels.prev)
          .css({cursor: 'pointer'});
      } else {
        $('img', $(this)).css({opacity: .4});
        $(this).click(Popel.behaviors.SlidePanels.next)
          .css({cursor: 'pointer'});
      }
    });
    
    firstShown.before(firstSwitched);
    var fstoffset = ($imgcont.parent().width() - firstShown.width()) / 2;
    var offset = 0 - (firstSwitched.outerWidth(true) - fstoffset);
    var style = {width: (totalwidth + 100) +'px', left: offset + 'px'};
    $imgcont.css(style);
    
    return;
  }).addClass('images-processed');
}


Popel.behaviors.SlidePanels.prev = function(evt){
  evt.stopPropagation();
  var $clicked = $(evt.target);
  var $imgcont = $clicked.parent().find('.images');
  if($imgcont.length == 0){
    $imgcont = $(evt.target).parents('.images');
    
  }
  if($imgcont.is(':animated')) return;
  var $imgs = $('.image', $imgcont);
  
  var $nextShown = $($imgs.get(0))
    .unbind('click')
    .css('cursor', 'default');
  var $currShown = $($imgs.get(1))
    .unbind('click')
    .click(Popel.behaviors.SlidePanels.next)
    .css('cursor', 'pointer');
  var $nextSwitched = $($imgs.get($imgs.length-1))
    .unbind('click')
    .click(Popel.behaviors.SlidePanels.prev);
  
  $nextShown.before($nextSwitched);
  $imgcont.css('left', $imgcont.position().left - $nextSwitched.outerWidth(true));
  
  var nextoffset = ($imgcont.parent().width() - $nextShown.width()) / 2;
  var offset = 0 - ($nextSwitched.outerWidth(true) - nextoffset);
  var style = {left: offset + 'px'};
  
  $('img', $currShown).animate({opacity: .4});
  $('img', $nextShown).animate({opacity: 1});
  $imgcont.animate(style, 250);
  
  return false;
}

Popel.behaviors.SlidePanels.next = function(evt){
  evt.stopPropagation();
  var $clicked = $(evt.target);
  var $imgcont = $clicked.parent().find('.images');
  if($imgcont.length == 0){
    $imgcont = $(evt.target).parents('.images');
  }
  if($imgcont.is(':animated')) return;
  var $imgs = $('.image', $imgcont);
  
  var $nextShown = $($imgs.get(2))
    .unbind('click')
    .css('cursor', 'default');
  var $currShown = $($imgs.get(1))
    .unbind('click')
    .click(Popel.behaviors.SlidePanels.prev)
    .css('cursor', 'pointer');
  var $nextSwitched = $($imgs.get(0))
    .unbind('click')
    .click(Popel.behaviors.SlidePanels.next);
  
  var nextoffset = ($imgcont.parent().width() - $nextShown.width()) / 2;
  var offset = 0 - (($nextSwitched.outerWidth(true) + $currShown.outerWidth(true)) - nextoffset);
  var style = {left: offset + 'px'};
  $('img', $currShown).animate({opacity: .4});
  $('img', $nextShown).animate({opacity: 1});
  $imgcont.animate(style, 250, null, function(){
    $($imgs.get($imgs.length-1)).after($nextSwitched);
    $imgcont.css('left', $imgcont.position().left + $nextSwitched.outerWidth(true));
  });
  return false;
}