/*
 * custom jQuery extension functions
 */
 
/* Get outerHTML */ 
jQuery.fn.outer = function() {
  return $( $('<div></div>').html(this.clone()) ).html();

}
/*--------------------------jQuery extension------------------------------------*/

/*
 * Control the header fades in and out effect.
 */
function headerFades(){
  $("#header-list .ss-list").css({'opacity':'0.5'});
  $("#header-list .ss-nav").css({'opacity':'0'});
  
  $("#header").bind('mouseover.headerfade', function(e){
    $("#header-list .ss-list").stop().fadeTo(500, 1);
    $("#header-list .ss-nav").stop().fadeTo(500, 1);
  });
  
  $("#header").bind('mouseout.headerfade', function(e){
    $("#header-list .ss-list").stop().fadeTo(500, 0.5);
    $("#header-list .ss-nav").stop().fadeTo(500, 0);
  });
}

function headerSlideShow(){
  var slideshow = '#header-list';  // slideshow container

  //scrollpane parts
  var scrollPane = $('.ss-list', slideshow);
  var scrollContent = $('.ss-body', slideshow);
  
  // adjust the content width
  var child = $(scrollContent.children(":first"));  
  var childWidth = child.width();
  childWidth += parseInt(child.css("padding-left"), 10) + parseInt(child.css("padding-right"), 10); //Total Padding Width
  childWidth += parseInt(child.css("margin-left"), 10) + parseInt(child.css("margin-right"), 10); //Total Margin Width
  childWidth += parseInt(child.css("borderLeftWidth"), 10) + parseInt(child.css("borderRightWidth"), 10); //Total Border Width
  var contentwidth = scrollContent.children().length * childWidth;
  scrollContent.width(contentwidth + 'px');
  
  // build the slider
  var headerSlider = $(".slider-bar", slideshow).slider({
    min: 0,
    max: contentwidth - 600,
    start: function(e, ui) {
    },
    slide: function(e, ui) {
      $('#header-list .ss-body').css('left', Math.round(ui.value * -1));
    },
    change: function(e, ui) {
    },
    stop: function(e, ui) {
    }
  });
  
  // Navigation Left and Right
  $('.ss-nav .prev', slideshow).click(function(){
    var pos = headerSlider.slider('value');    
    headerSlider.slider('value', (pos - childWidth > 0) ? pos - childWidth : 0);
    $('#header-list .ss-body').css('left', Math.round(headerSlider.slider('value') * -1));
  });
  
  $('.ss-nav .next', slideshow).click(function(){
    var pos = headerSlider.slider('value');    
    headerSlider.slider('value', (pos + childWidth < headerSlider.slider('option', 'max')) ? pos + childWidth : headerSlider.slider('option', 'max'));
    $('#header-list .ss-body').css('left', Math.round(headerSlider.slider('value') * -1));
  });
  
  // Scroll main slideshow when a thumbnail is clicked
  $("#header-list .ss-page a").click(function(){
    var index = $(".ss-page", scrollContent).index($(this).parent());
    $('.ss-list', '.main-slideshow').stop().scrollTo( 'li:eq(' + index + ')', 800, { axis:'x' } );
    return false;
  });

} // end of function headerSlideShow()

/*
 * Create the main slideshow using jQuery scrollTo script.
 */
function bodySlideShow(){
  var slideshow = '.main-slideshow';  // slideshow container
  var scrollContent = $('.ss-body', slideshow);
  
  // adjust the content width
  var child = $(scrollContent.children(":first"));  
  var childWidth = child.width();
  childWidth += parseInt(child.css("padding-left"), 10) + parseInt(child.css("padding-right"), 10); //Total Padding Width
  childWidth += parseInt(child.css("margin-left"), 10) + parseInt(child.css("margin-right"), 10); //Total Margin Width
  childWidth += parseInt(child.css("borderLeftWidth"), 10) + parseInt(child.css("borderRightWidth"), 10); //Total Border Width
  scrollContent.width((scrollContent.children().length * childWidth) + 'px');
  
  // stop links progression
  $('a', slideshow).click(function(){ return false; });
  
  // control navidation buttons
  $(".ss-nav .next, .ss-nav .prev" , slideshow).click(function(){
    if ($(this).hasClass('next')) {
      $('.ss-list', slideshow).stop().scrollTo( '+=' + childWidth + 'px', 800, { axis:'x' } );
    }
    else if ($(this).hasClass('prev')) {
      $('.ss-list', slideshow).stop().scrollTo( '-=' + childWidth + 'px', 800, { axis:'x' } );
    }
  });
}

/*
 * Read all the images from the post and place them inside an unordered list.
 * Then replace the body post's with this new unordered list and apply the slideshow script.
 */
function post2slideshow(){
  var container = '.item-project';
  if ($(container).length) {
    var slideshow = '<div class="ss-list"><ul class="ss-body">';
    $.each($('img', container), function(){
      slideshow += '<li class="ss-page">' + $(this).outer() + '</li>';  
    });
    slideshow += '</ul></div>';
    
    $(container).replaceWith(slideshow);
  }
}

$(function() {
  headerFades();
  headerSlideShow();
  bodySlideShow();
});