var sliding = true;

jQuery(document).ready(function(){
  
  $('img').removeAttr("width").removeAttr("height");
  $('.csc-textpic-imagewrap').width('auto');
  
  //Scrollable JS
  if ($(".scrollable").length) {
  
    // execute your scripts when the DOM is ready. this is mostly a good habit
    $(function() {

      // initialize scrollable
      $(".scrollable").scrollable({circular: true, speed: 1500}).navigator().autoscroll({ autoplay: true, interval: 8000 });

    });
  }
  
  
  //Fader JS
  if ($(".effectContainer").length) {
    slideShow();
  }
    
  $('.scroller').mouseover(function() {
      sliding = false;
      //$('.scroller').css("background", "red");
  });
  
  $('.scroller').mouseout(function() {
      sliding = true;
      //$('.scroller').css("background", "green");
  });  
  
  
  $('.next.browse').click(function() {
    //if no IMGs have the show class, grab the first image
    var currentDiv = ($('.effectContainer > div.show') ?  $('.effectContainer > div.show') : $('.effectContainer > div:first-child'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var nextDiv = ((currentDiv.next().length) ? ((currentDiv.next().hasClass('caption'))? $('.effectContainer > div:first') :currentDiv.next()) : $('.effectContainer > div:first-child'));
 
    //Set the fade in effect for the next image, show class has higher z-index
    nextDiv.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 250);

    //Hide the current image
    currentDiv.animate({opacity: 0.0}, 250)
    .removeClass('show');
  });
  
  $('.prev.browse').click(function() {
    //if no IMGs have the show class, grab the first image
    var currentDiv = ($('.effectContainer > div.show') ?  $('.effectContainer > div.show') : $('.effectContainer > div:first-child'));

    //Get previouse image
    var prevDiv = ((currentDiv.prev().length) ? ((currentDiv.prev().hasClass('caption'))? $('.effectContainer > div:first') :currentDiv.prev()) : $('.effectContainer > div:last-child'));
 
    
 
    //Set the fade in effect for the next image, show class has higher z-index
    prevDiv.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 250);

    //Hide the current image
    currentDiv.animate({opacity: 0.0}, 250)
    .removeClass('show');
  });  
  
});


$(window).resize(function(){
  
  if ($(".scrollable").length) {
    // execute your scripts when the DOM is ready. this is mostly a good habit
    $(function() {

      // initialize scrollable
      $(".scrollable").scrollable({ circular: true }).seekTo(0, "100").navigator().autoscroll({ autoplay: true });

    });
  }
  
});



function slideShow() {
  
  //Set the opacity of all images to 0
  $('.effectContainer > div').css({opacity: 0.0});
  
  //Get the first image and display it (set it to full opacity)
  $('.effectContainer > div:first-child').css({opacity: 1.0}).addClass("show");
  
  setInterval('gallery()',8000);
}


function gallery() {
  
  if (sliding == true) {
    //if no IMGs have the show class, grab the first image
    var currentDiv = ($('.effectContainer > div.show') ?  $('.effectContainer > div.show') : $('.effectContainer > div:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var nextDiv = ((currentDiv.next().length) ? ((currentDiv.next().hasClass('caption'))? $('.effectContainer > div:first') :currentDiv.next()) : $('.effectContainer > div:first'));
  
    //Set the fade in effect for the next image, show class has higher z-index
    nextDiv.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1500);

    //Hide the current image
    currentDiv.animate({opacity: 0.0}, 1500)
    .removeClass('show');
  } 
}