var pauseFeature = function() {
	$('#slide').cycle('pause');
	$('#description').cycle('pause');
}

var startFeature = function() {
	$('#slide').cycle('resume');
	$('#description').cycle('resume');
	$f("*").each(function() {
		$(this).stop();
	});
}

$(document).ready(function() {
	
	$('#slide').cycle({
		timeout:       	7500, 
		speed:         	1000, 
		fx: 		   	'scrollLeft' 
	});
	
	$('#description').before('<div id="featurenav">').cycle({
		timeout:       	7500,  
		speed:         	1000, 
		fx: 			'fade',
		pager:  		'#featurenav',
		pagerClick:     function(zeroBasedSlideIndex, slideElement) {
							var theSlide = zeroBasedSlideIndex;
							$('#slide').cycle('pause');
							$('#slide').cycle(theSlide);
							$('#description').cycle('pause');
							$f("*").each(function() {
								$(this).stop();
							});
						}
	});
	
	$('#featurenav').css('left',function(){
		var total = $('#slide').children().length;
		var final = 849-((total*28)/2);
			final = final+'px';
		return final;
	});
	
	$("a[rel^='prettyPhoto']").prettyPhoto({
		animationSpeed: 'fast',
		showTitle: false,
		opacity: 0.80,
		theme: 'sca_modal',
		markup: '<div class="pp_pic_holder"> \
					<div class="pp_top"> \
						<div class="pp_left"></div> \
						<div class="pp_middle"></div> \
						<div class="pp_right"></div> \
					</div> \
					<div class="pp_content_container"> \
						<div class="pp_left"> \
						<div class="pp_right"> \
							<div class="pp_content"> \
								<div class="pp_fade"> \
									<a href="#" class="pp_expand" title="Expand the image">Expand</a> \
									<div class="pp_loaderIcon"></div> \
									<div class="pp_hoverContainer"> \
										<a class="pp_next" href="#">next</a> \
										<a class="pp_previous" href="#">previous</a> \
									</div> \
									<div class="pp_details clearfix"> \
										<a class="pp_close" href="#">Close</a> \
										<p class="pp_description"></p> \
										<div class="pp_nav"> \
											<a href="#" class="pp_arrow_previous">Previous</a> \
											<p class="currentTextHolder">0/0</p> \
											<a href="#" class="pp_arrow_next">Next</a> \
										</div> \
									</div> \
									<div id="pp_full_res"></div> \
								</div> \
							</div> \
						</div> \
						</div> \
					</div> \
					<div class="pp_bottom"> \
						<div class="pp_left"></div> \
						<div class="pp_middle"></div> \
						<div class="pp_right"></div> \
					</div> \
					</div> \
					<div class="pp_overlay"></div> \
					<div class="ppt"></div>',

	});

});