$(function() {

	//@ compile notes from dev, plans for this, etc... consider a css file rather than embedding into js

	//hidden w css, revealed in js so no odd flashing
	$('#slideshow-wrapper').show();

	/* -----------------------------------------------
		GENERAL
	----------------------------------------------- */

		//SCROLLBARS FOR INFO
		$('#slideshow_info').jScrollPane({
			//options
		});
			//hide w visibility in css, can grab height, then initialize so it has that height, hide (display), visibility show
			//avoids jscrollpane not being able to figure height and in which case it doesn't appear
			$('#slideshow_info').hide();
			$('#slideshow_info').css('visibility','visible');
		
		
	/* -----------------------------------------------
		SLIDESHOW
	----------------------------------------------- */
		
		/* ----------------
			VARS
		---------------- */
		var $stage_height = 600;
		var $stage_width = 870;
		
		var $thumbsHoriz = 5;
		var $thumbsVert = 5;
		var $thumbsSpacing = 20;
		//var $img_border_in_css = 3;
		var thumbs_per_page = $thumbsHoriz * $thumbsVert;
		
		//calculates height and width of thumbs
		var $thumb_height = ( $stage_height - ($thumbsSpacing * ( $thumbsVert - 1) ) ) / $thumbsVert;
		var $thumb_width = ( $stage_width - ($thumbsSpacing * ( $thumbsHoriz - 1) ) ) / $thumbsHoriz;
		//var $thumb_height = (( $stage_height - ($thumbsSpacing * ( $thumbsVert - 1) ) ) / $thumbsVert ) - $img_border_in_css*2;
		//var $thumb_width = (( $stage_width - ($thumbsSpacing * ( $thumbsHoriz - 1) ) ) / $thumbsHoriz ) - $img_border_in_css*2;
		
//		console.log('thumb_width = ' + $thumb_width + ' | thumb_height = ' + $thumb_height);
		
		//these get defined in onAfter function from jcycle
		var $current_slide;
		var $total_slides;
		
		var $thumbs = $('#slideshow_thumbs');
		
		//CLONE THUMBS & MOVE
			//@ should this be in pagerFactory? also what about when php generated thumbnails?		
//		$('img').clone().appendTo($thumbs);

		//SETUP WRAPS FOR PAGING
/*
		var $thumbs_img = $('#slideshow_thumbs img');
		$thumbs_img.removeAttr("style"); //remove jcycles default styling
		$thumbs_img.wrapAll('<ul>');
		$thumbs_img.wrap('<li>');
		$thumbs_img.wrap('<a href="#">');
*/
		
		//WRAPS GROUPS INTO COLUMNS
		var li = $("#slideshow_thumbs ul li");
		for(var i = 0; i < li.length; i+= thumbs_per_page ) {
		  li.slice(i, i+ thumbs_per_page ).wrapAll('<div class="column clearfix">');
		}

		/* ----------------
			CSS
		---------------- */
		//match thumb stage to slideshow stage
		$thumbs.css({
			width: $stage_width,
			height: $stage_height
		})
		
		//add margins around thumbs
		$('#slideshow_thumbs li').css({
			marginRight: $thumbsSpacing,
			marginBottom: $thumbsSpacing,
			float: 'left'
		})
		
		//remove margins for right column and bottom row
		$('#slideshow_thumbs li:nth-child( '+$thumbsHoriz+'n)').css({
			marginRight: '0px'
		})
		//@attempting to remove margin off bottom of last row but difficulties, seems to work fine w it on still
		/*
		var last_row = (( $thumbsVert - 1 ) * $thumbsHoriz) - 1;
		$('#slideshow_thumbs li:gt('+last_row +')').css({
			marginBottom: '0px'
		})
		*/
		
		//thumb set width & height and center vert
		$('#slideshow_thumbs li a').css({
			width: $thumb_width,
			height: $thumb_height,
			cursor: 'pointer',
			display: 'table-cell', //these are a vertical align css hack @just convert to all js likely
			verticalAlign: 'middle'
		})
		
		//thumb max width & height and center horiz
		$('#slideshow_thumbs img').css({
			margin: '0 auto',
			display: 'block',
			maxWidth: $thumb_width,
			maxHeight: $thumb_height
		})
		
		//img slide width
		$('.image_slide a').css({
			width: $stage_width,
			height: $stage_height,
			display: 'table-cell', //these are a vertical align css hack @just convert to all js likely
			verticalAlign: 'middle'
		})
		
		//img max width & height and center horiz
		$('.image_slide img').css({
			margin: '0 auto',
			display: 'block',
			maxHeight: '100%' //seems odd this is needed
		})

		//HERE OR IN CSS
		$('#slideshow').css({
			zIndex : 0
		})
		$('#slideshow_thumbs').css({
			position: 'absolute',
			top: 0,
			zIndex: 2,
			overflow: 'hidden'
		})
		$('#slideshow_thumbs ul').css({
			height: '100%'	
		})
		$('#slideshow li').css({
			listStyle: 'none'
		})
		$('.column').css({
			width: $stage_width,
			height: $stage_height,
			float: 'left'
		})

		/* ----------------
			FUNCTIONS & SUCH
		---------------- */
		
		//slide next/prev
		var $slide_next_btn = $('#slide_next');
		var $slide_prev_btn = $('#slide_prev');
		
		//cache items that are shown/hidden
		var $thumb_nav = $('#thumb_prev, #thumb_next');
		var $slide_nav = $('#slide_next, #slide_prev, #slide_count');

		//hide on load
		$thumb_nav.hide();

		//THUMB TOGGLE FUNCTION
		function thumbs_toggle($force, $speed) { //can force show/hide, and set speed

			//default speed value
			if ( !$speed ) { $speed = 600 }
			
			if ($force == 'hide') {	
				$do_hide = true;
			} else if ( $force == 'show' ) {
				$do_hide = false;
			} else {
				$do_hide = $thumbs.is(':visible');
			}
			
			//if thumbs are visible, then hide
			if ( $do_hide  ) {

				$thumbs.fadeOut($speed);
				//$thumb_nav.fadeOut($speed);
				$thumb_nav.hide();
				$slide_nav.fadeIn($speed);
			
			//otherwise if hidden, then show
			} else {
			
				$thumbs.fadeIn($speed);
				$thumb_nav.fadeIn($speed);
				//$slide_nav.fadeOut($speed);			
				$slide_nav.hide();
			}
			
		}

		//SETUP THUMB PAGES & UPDATE
		var $thumb_active;
		function thumb_pagition($direction) {
				
			//calculate total sets
			var pagination_sets =  Math.ceil($total_slides / thumbs_per_page);
			
			//set width of thumbs container
			$('#slideshow_thumbs ul').width( $stage_width * (pagination_sets ) );
		
			//determine current pagination set
			var pagination_current_set = pagination_sets - ( Math.floor( ($total_slides - ($current_slide - 1) ) / thumbs_per_page  ));
	
			//set to according position
			$thumbs.scrollLeft( (pagination_current_set - 1 ) * $stage_width );	
			
			//hide thumb nav if only 1 page
			if ( pagination_sets <= 1 ) {
				$thumb_nav.hide();
			}
			
			//inactive class for thumbs page @sort of hacky
			if ( $direction == null ) { $thumb_active = pagination_current_set; }
			if ( $direction == 'next' &&  ($thumb_active != pagination_sets) ){ $thumb_active++ }
			if ( $direction == 'prev' && ($thumb_active != 1 ) ){ $thumb_active-- }
		    $('#thumb_prev')[$thumb_active == 1 ? 'addClass' : 'removeClass']('inactive');
		    $('#thumb_next')[$thumb_active == pagination_sets ? 'addClass' : 'removeClass']('inactive');
	
		}
		
		//TOGGLE META
		/* @ add this some other time
		function toggle_meta($force) {
			$('#slideshow_meta').fadeOut;
		} 
		*/

		
		/* ----------------
			LISTENERS
		---------------- */
		
		//CLICKING A THUMB
		$('#slideshow_thumbs img').click( function(evt) {
			thumbs_toggle();
			evt.preventDefault();
		})

		//SHOW/HIDE THUMBS BUTTON
		$('#thumb_show').click( function(evt){
			thumbs_toggle();
			thumb_pagition();
			$('#slideshow_info').fadeOut();
			auto_advance('pause');
			evt.preventDefault();
		})
		
		//SLIDESHOW INFO BUTTON
		$('#info_show').click( function(evt) {
			$('#slideshow_info').fadeToggle();
			//thumbs_toggle('hide',0);
			auto_advance('pause');
			evt.preventDefault();
		})	

		//NEXT / PREV THUMB NAVIGATION
		$('#thumb_next').click(function(evt){
			$thumbs.animate({scrollLeft: $stage_width + $thumbs.scrollLeft() }, 100);
			$('#slideshow_info').fadeOut();
			thumb_pagition('next');
			evt.preventDefault();
		})
		$('#thumb_prev').click(function(evt){
			$thumbs.animate({scrollLeft: $thumbs.scrollLeft() - $stage_width }, 100);
			$('#slideshow_info').fadeOut();
			thumb_pagition('prev');
			evt.preventDefault();
		})
		
		//ADD KEYBOARD NAVIGATION FOR SLIDESHOWS
		$(window).keydown(function(e){
			if(e.which == 37){ $('#slide_prev').click();}
			else if(e.which == 39){ $('#slide_next').click();}
		});
		
		//NEXT / PREV SLIDE BUTTONS - jcycle handles most
		$slide_prev_btn.click(function(){
			$('#slideshow_info').fadeOut();
			auto_advance('pause');
		})
		//NEXT / PREV SLIDE BUTTONS - jcycle handles most
		$slide_next_btn.click(function(){
			$('#slideshow_info').fadeOut();
			auto_advance('pause');
		})
 	
 		/* ----------------
			JCYCLE
		---------------- */

		//ADDS HASH, DIRECT LINK TO IMAGES	
		//var title = $('#slideshow .title').html();
		var index = 0, hash = window.location.hash;
		if (hash) {
			index = /\d+/.exec(hash)[0];
			index = (parseInt(index) || 1) - 1; // slides are zero-based
		}

 		//JCYCLE SETUP
	  	var slideshow = $('#slideshow').cycle({
			fx: 	'fade',
			speed:	1, //do not set to 0!
			startingSlide: index,
			height: $stage_height,
			width:  $stage_width,
			prev:   $slide_prev_btn,
	    	next:   $slide_next_btn,
	    	after:   onAfter,
	    	before:  onBefore,
	    	delay: 1000, //otherwise first transistion seems fast
	    	timeout: 4000,
	    	//nowrap: 1,
	    	pager:  '#slideshow_thumbs ul',
		    pagerAnchorBuilder: pagerFactory,
			updateActivePagerLink: pagerClassOverride
			
		})
		
		//BEFORE FUNCTION
		function onBefore(curr, next, opts) {
			thumbs_toggle('hide',1); //closes thumbs on initial load quickly
		}
	
		//AFTER FUNCTION
		function onAfter(curr, next, opts) {
			
			//handles the hash
			window.location.hash = opts.currSlide + 1;
		   		    
		   	//handles states for next/prev buttons w classes
		   	var index = opts.currSlide;
		    $('#slide_prev')[opts.currSlide == 0 ? 'addClass' : 'removeClass']('inactive');
		    $('#slide_next')[opts.currSlide == opts.slideCount - 1 ? 'addClass' : 'removeClass']('inactive');
		   	
		   	//add count
		   	var count = (opts.currSlide + 1) + ' / ' + opts.slideCount;
			$('#slide_count').html(count);
			
			//get current and total - setup for use in other functions
			$current_slide = opts.currSlide;
			$total_slides = opts.slideCount;

		   	//moves meta to new position
			$('#slideshow_meta').html( $('.image_meta', this).clone() );
			
		}
		
		//CREATE PAGINATION (THUMBS)
		function pagerFactory(idx, slide) {
			// return selector string for existing anchor 
		    return '#slideshow_thumbs li:eq(' + idx + ') a';
		}

		//OVERRIDES TYPICAL ACTIVE CLASS
			//which is thrown off because of .columns
		function pagerClassOverride (pager, activeIndex) { 
			$(pager).find('li').removeClass('active_thumb'); 
			$(pager).find('li:eq('+activeIndex+')').addClass('active_thumb');
			//$(pager).find('li:eq('+activeIndex+')').addClass('active_thumb').siblings().removeClass('active_thumb'); 
		}	

		/* ----------------
			AUTU ADVANCE and PLAY & PAUSE BTNS
			@should reorder, consider scopes of variables
		---------------- */
		$slide_play_btn = $('#slide_play');
		$slide_play_btn.addClass('play'); //add initial 'play' class
		
		function auto_advance($force) {
			
			if ($force == 'pause') {	
				$do_pause = true;
			} else if ( $force == 'play' ) {
				$do_pause = false;
			} else {
				$do_pause = !(slideshow.is(':paused'));
			}
		
		    if ( $do_pause ) {
		    	$slide_play_btn.addClass('play').removeClass('pause');
		    	$slide_play_btn.html('Slideshow'); //was Play
		    	slideshow.cycle('pause');
		    } else {
		    	$slide_play_btn.addClass('pause').removeClass('play');
		    	$slide_play_btn.html('Pause')
		    	slideshow.cycle('resume');	
		    }	
		}
		//pause on load
		$('#slideshow').cycle('pause');

		//PLAY / PAUSE BUTTON
		$slide_play_btn.click(function(evt) { 
		    
		    //close anything that might be open
		    $('#slideshow_info').hide();
		    thumbs_toggle('hide',1);
		    
		    auto_advance();
		    
		    evt.preventDefault();

		});
		
	/* -----------------------------------------------
		TOOLTIPS
	----------------------------------------------- */

		//QTIP (for now)
		//http://craigsworks.com/projects/qtip/demos/content/default	
/*
		$('.tooltip').qtip({ 
			position: {
		   		corner: 'bottomMiddle',
				adjust: { x: 0, y: 40 }
			}
		});
*/

});