//BEGIN jqSlider

$.fn.jqSlider = function() { 

h=0;

return $(this).each(function(){

var options = {

			  animSpeed : 700,        // sets the transition speed (1000 = 1 sec)

        animFX : 'easeOutExpo', // sets transition effect - Circ   Cubic  Quart   Quint    Sine    Elastic    Back    Bounce    Expo
			   
			  slideDelay : 8000,      // sets the amount of delay between transitions (1000 = 1 sec)
			  
			  autoSlide : false,      // sets manual (false) or automatic (true) transitions. Automatic mode sets loop to true 

				nextPrevButtons : true, // toggle next and previous buttons on/off
				
				pageButtons : true,     // toggle page buttons on/off
				
				allButtons : true,      // toggle all buttons on/off. Off mode triggers autoSlide to automatic, and loop to true
				
				loop : false            // toggles looping
				
			  }

var $this = $(this);

$this.addClass('jqSlider');

if ( !$this.attr('id').length > 0 ) { h++; $this.attr('id', 'jqSlider_' + h); }

var $id = $this.attr('id'),

//get content vars

articlesTotal = $this.children().length,

articlesWidth = $this.children().width(),

overflowWidth = $this.width(),

overflowHeight = $this.children().height(),

topArticleCanvasWidth = articlesWidth * articlesTotal /*+ overflowWidth */,

entriesPerPage = Math.floor(overflowWidth / articlesWidth),

totalPages = Math.ceil( articlesTotal / entriesPerPage),

$canvasID = $id + '-canvas',

$overflowID = $id + '-overflow';

//BEGIN wrap contents with canvas and overflow 

$this.children()
     .wrapAll('<div id="' + $canvasID + '" />').parent()
	   .css({'width':topArticleCanvasWidth})
	   .wrap('<div id="' + $overflowID +'" class="jqSlider-overflow">').parent()
	   .css({'width':overflowWidth, /*'height':overflowHeight,*/ 'overflow':'hidden', 'clear':'both'}).prepend('<div class="top"></div><div class="bottom"></div>')

//END wrap contents with canvas and overflow







//BEGIN create and populate ul.articles

if ( articlesTotal > 1 && topArticleCanvasWidth > overflowWidth ) {

$populateLinks = $id + '-Article-links';


var i = 0;

var $scratchID = 'scratch-' + $id;

$('body').append('<div id="' + $scratchID + '" />');

var getUl = $('#' + $canvasID),


    group = getUl.find('div:lt(' + entriesPerPage + ')', this).remove();
	
  while ( group.length ){

    $('<div/>').append(group).appendTo('#' + $scratchID).attr('id', $id + '-' + i).css({'float':'left','width':'auto'});

    group = getUl.find('div:lt(' + entriesPerPage + ')', this).remove();

		i++;
	
  };

var lastCount = $('#' + $scratchID).children('div:last-child').children('div').length; // get number of individual articles in last page

var offsetVar = 0;

if ( lastCount !== entriesPerPage ) { offsetVar = lastCount * articlesWidth; } // if number of articles in last page is not equal to entries per page, we store the total width of these articles, so when we click the button for the last page later, we can offset by this value instead, rather than the default full width value.
	
$('#' + $scratchID).children('div').appendTo('#' + $canvasID);	

$('#' + $scratchID).remove();



var prevVar = '';	
var nextVar = ''; 
var inactiveVar = '';

if ( options.loop == false ) { inactiveVar = ' inactive' }

if ( options.nextPrevButtons == true ) { 

prevVar = '<li><a class="jqSlider-prev' + inactiveVar + '" href="../\#prev"></a></li>';
nextVar = '<li><a class="jqSlider-next" href="../\#next"></a></li>';

 }

$('#' + $overflowID).after('<ul id="' + $id + '-list" class="jqSlider-list">' + prevVar + '<div id="' + $populateLinks + '" class="jqSlider-list-links"></div>' + nextVar + '</ul>').prev().show();

$('#' + $canvasID).children('div').each(function(){ //BEGIN insert LI elements

$articleID = $(this).attr('id'); // get ID of current article

$('#' + $populateLinks).append('<li><a href="#' + $articleID + '"></a></li>'); // add LI element to ul.articles width articleID in href

}); //END insert LI elements

$('#' + $populateLinks + ' li a:first').addClass('jqSlider-active');

} //END create and populate ul.articles

if ( options.pageButtons == false ) { $('#' + $populateLinks).hide(); }

if ( options.pageButtons == false && options.nextPrevButtons == false ) { options.allButtons = false }

if ( options.allButtons == false ) { $('#' + $id + '-list').hide(); options.autoSlide = true; options.loop = true; } 


//BEGIN navigate to article



var indexVar = 0;

function nextSlide() {

cacheIndexVar = indexVar; // store indexVar, so we can revert back to it in the event of multiple clicks while animating 

indexVar++; 

if ( options.loop == false && indexVar >= totalPages - 1 ) { $a.addClass('inactive'); }

if ( options.loop == false && indexVar == totalPages ) { indexVar = cacheIndexVar;} 

if ( indexVar == totalPages ) {indexVar = 0;}

$hrefID = $('#' + $id + ' .jqSlider-list-links li:eq(' + indexVar + ') a').attr('href').split('#'), 

$hrefID = '#' + $hrefID[1];

}


function animSlide() {

$parentID = '#' + $($hrefID).parent().attr('id'),

indexVar = $($hrefID).index(),

pos = $($hrefID).position(), posLeft = pos.left, posTop = pos.top,

posLeft *= -1,
posTop  *= -1;

cacheIndexVar = indexVar;

//if ( $($parentID).is(':animated') ) { indexVar = cacheIndexVar; return; } // prevents multiple clicks adding to the indexVar when animating

if ( indexVar == totalPages - 1 ) { posLeft += offsetVar } // if the last page is clicked, add the offsetVar to the posLeft

if ( options.loop == false && indexVar >= totalPages - 1 ) { indexVar = cacheIndexVar; $a.parent().parent().next().children('a').addClass('inactive'); }

if ( options.loop == false && indexVar == 0 ) { indexVar = cacheIndexVar; $a.parent().parent().prev().children('a').addClass('inactive'); }

$($parentID).stop().animate({left: posLeft, top: posTop}, options.animSpeed, options.animFX);

$('#' + $id + ' .jqSlider-list-links li a.jqSlider-active').removeClass('jqSlider-active');

$('#' + $id + ' .jqSlider-list-links li:eq(' + indexVar + ') a').addClass('jqSlider-active');

}

function fullSlide() {nextSlide(); animSlide();}

if ( options.autoSlide == true ) { 

options.loop = true;

var t = setInterval(fullSlide, options.slideDelay);

$($this).mouseover(function(){clearInterval(t)}).mouseout(function(){t = setInterval(fullSlide, options.slideDelay);}); 

}

$('#' + $id + ' li a').click(function(e){

e.preventDefault();

$a = $(this),

$id = $(this).parents('.jqSlider-list').attr('id'),

$hrefID = $(this).attr('href').split('#'),

$hrefID = '#' + $hrefID[1];

if ( $a.index() == articlesTotal ) { $(this).closest('ul').children('li:last a').addClass('inactive') }

$('#' + $id).children('li').children('a').removeClass('inactive');

if ( $hrefID == '#next' ) { 

nextSlide();

}

if ( $hrefID == '#prev' ) { 

cacheIndexVar = indexVar;

indexVar--;  

if ( options.loop == false && indexVar == 0 ) { $a.addClass('inactive'); }

if ( options.loop == false && indexVar < 0 ) { indexVar = 0; $a.addClass('inactive'); } 

if ( indexVar < 0 ) {indexVar = totalPages - 1;}

$hrefID = $('#' + $id + ' .jqSlider-list-links li:eq(' + indexVar + ') a').attr('href').split('#'),

$hrefID = '#' + $hrefID[1];

}

animSlide();

});//END navigate to article







//BEGIN headline functionality

var $slideElement = '.headline', //set slide element here

$headline = '#' + $canvasID + ' ' + $slideElement,

originHeadline = $($headline).height();

$($headline).parent().hover(function(){ 

$slideThis = $(this).children($slideElement);

$($slideThis).css({'height':'auto'});

var headlineHeight = $($slideThis).height();

$($slideThis).css({'height':originHeadline});

$($slideThis).animate({height:headlineHeight}, options.animSpeed, options.animFX); 

}, function(){ $($slideThis).stop().animate({height:originHeadline}, options.animSpeed, options.animFX); });

//END headline functionality

}); }//END jqSlider

//#top-article-frame

$('.mySlide').jqSlider();