(function($)
{

	function BeforeFeature(curr, next, opts) {
    $(this).find('.content').css({'opacity': 0, 'bottom': -50});
    $(this).find('.stripe').css({'left': -680});
	}
	function AfterFeature(curr, next, opts) {
    $(this)
		  .find('.content')
			.css({'opacity': 0, 'bottom': -50})
			.animate({'opacity': 1,'bottom': 0},{easing:'easeOutQuint', duration:500, complete:
			  function() {
			}
  });
		$(this)
			.find('.stripe')
			.css({'left': -680})
			
			.animate({'left': 0},{easing:'easeOutQuint',duration:1500}
			);
		}
  //
	$(document).ready(function () {
			// feature cycle
			$("ul.slides")
				.each(function(index) {
          $(this).find('.content').css({'opacity': 0}).before('<div class="stripe"></div>');
        })
				.before('<div id="feature-nav" class="cycle-nav">')
				.cycle({ 
					fx:      'fade',
					pager:  '#feature-nav',
					pagerEvent:   'mouseover',
					pause:         1,     // T = enable "pause on hover" 
          pauseOnPagerHover: 1, // T = pause when hovering over pager link 
					cleartype:  true,  // T = clearType corrections applied (for IE) 
    			cleartypeNoBg: true, // T = disable extra cleartype fixing / F = force background color setting on slides) 
					before: BeforeFeature,
					after: AfterFeature,
					speed:    600, 
					timeout:  9000
					}			
			);

  });
}(jQuery));