// Easing equation, borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/

$(document).ready(function () {

	$(".showdetails").animate({height: 'hide',opacity:'0'},600);

	/**
	 * IMPORTANT: this call to the plugin specifies ALL the settings (plus some of jQuery.ScrollTo)
	 * This is done so you can see them. You DON'T need to specify the commented ones.
	 * A 'target' is specified, that means that #screen is the context for target, prev, next and navigation.
	 */
 	var $player = $('#player');//we'll re use it a lot, so better save it to a var.
	var $items = $player.find("div.imageview");
	$player.find('div').removeClass("displaynone");
	
	// get start image
	var startposition = 0;
	var startslide;
	var $thispos;
	
	grabqstr = location.search.split("&");
        $.each(grabqstr, function(){ 
		var key = this.split('=')[0]; 
		var val = this.split('=')[1]; 
		
		// grab id 
		if(key == "id") 
			startslide = val; 
			var $divPos = $player.find('div.imageview');
				jQuery.each($divPos, function(index) {
				$(this).removeClass("displaynone");
				if (this.id == "photo_" + val) {
					startposition = index;
				}
			});
        }); 


	$player.serialScroll({
		target:'#photoviewer',
		items:'div.imageview', // Selector to the items ( relative to the matched elements, '#sections' in this case )
		prev:'a.previmg',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
		next:'a.nextimg',// Selector to the 'next' button (absolute too)
		axis:'x',// The default is 'y' scroll on both ways
		navigation:'#imagelist li a',
		duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
		force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
		
		//queue:false,// We scroll on both axes, scroll both at the same time.
		//event:'click',// On which event to react (click is the default, you probably won't need to specify it)
		stop:false,// Each click will stop any previous animations of the target. (false by default)
		lock:false, // Ignore events if already animating (true by default)		
		start: startposition, // On which element (index) to begin ( 0 is the default, redundant in this case )		
		cycle:true,// Cycle endlessly ( constant velocity, true is the default )
		//step:1, // How many items to scroll each time ( 1 is the default, no need to specify )
		//jump:false, // If true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
		lazy:true,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
		//interval:1000, // It's the number of milliseconds to automatically go to the next
		//constant:true, // constant speed
		
		onBefore:function( e, elem, $pane, $items, pos ){
			/**
			 * 'this' is the triggered element 
			 * e is the event object
			 * elem is the element we'll be scrolling to
			 * $pane is the element being scrolled
			 * $items is the items collection at this moment
			 * pos is the position of elem in the collection
			 * if it returns false, the event will be ignored
			 */
			//metrics starts 
			s.tl(true,'o','AJAX Photoplayer: ID ' + elem.id.split("_")[1]); 
			//metrics ends
			
			 $('#photoviewer').find('div').removeClass("active");
			 $('#photoviewer div#' + elem.id).addClass("active");
			 //those arguments with a $ are jqueryfied, elem isn't.
			$newitem = $items.index(elem)
			if((($thispos - $newitem) < -2 || ($thispos - $newitem) > 2 ) && pos != 0){
				
				$('#photoviewer img').addClass("displaynone");
				$('.imageslide').addClass("loading");
//				$items.fadeIn("slow");
//				$player.find('#photoviewer').fadeOut("fast", function() {
//					$player.append("<br>should have triggered new item<br>")
//					$('#photoviewer').fadeIn("slow");								
//				});
				//$(elem).fadeIn("slow");
			}

			if ($(elem).find('p.hiddenbg').text() != '') {
				$thisimg = $(elem).find('p.hiddenbg').text();
				$thisalt = $(elem).find('p.hotel').text();
				$fullimg = $("<img src='" + $thisimg + "' height='415' width='675' alt='" + $thisalt + "'/>");
				$(elem).find('div.showdetails').before($fullimg);
			}
			imageid = elem.id.split("_")[1];
			$("ul#imagelist li a").removeClass("lit");
			$("ul#imagelist li a#thumb_" + imageid).addClass("lit");
			e.preventDefault();
			if( this.blur )
				this.blur();
		},
		onAfter:function(elem){
			//'this' is the element being scrolled ($pane) not jqueryfied
			
			$('#photoviewer').removeClass("loading");
			$('#photoviewer img').removeClass("displaynone");
			
			//get next item details
			$getitems = $player.find('div.imageview'),
			$thispos = $getitems.index(elem),
			$nextpos = $getitems.index(elem) + 1,
			$nextelem = $getitems.get($nextpos);

			//transform div
			if ($nextelem != null) {
				$nextid = $nextelem.id,
				
				$nextimg = $($nextelem).find('p.hiddenbg').text();
				$nextalt = $($nextelem).find('p.hotel').text();
				$fullnextimg = $("<img src='" + $nextimg + "' height='415' width='675' alt='" + $nextalt + "'/>");
				
				if ($nextimg != '') {
					$($nextelem).find('p.hiddenbg').remove();
					$($nextelem).find('div.showdetails').before($fullnextimg);
				}
			}
		}
	});
	
				   
	$(".imageview").hover(
		function(){
			$("div.active .showdetails").stop().animate({height: '90px',opacity:'0.75'},{queue:false,duration:500});
	}, function(){
		  $("div.active .showdetails").stop().animate({height: '0px',opacity:'0'},{queue:false,duration:1000});
	});

	$("ul#imagelist li a").click(function() {
		$sethref = ($(this).attr("href").split("&")[1]);
		$setid = $sethref.split("=")[1]

		$("ul#imagelist li a").removeClass("lit");
		$("ul#imagelist li a#thumb_" + $setid).addClass("lit");
	});
	
	//rollovers for menu items



	$("ul#imagelist li a").bind('mouseover focus', function(event) {
		var currentClass = $(this).attr("class");
			if (currentClass != "lit") {
				$(this).stop().addClass("hover");
			}													
	}).bind('mouseout blur', function(event) {/*mouseout*/
		$(this).stop().removeClass("hover");
	});
	
//	$("ul#imagelist li a").hover(
//		function(){
//			var currentClass = $(this).attr("class");
//			if ($(this).className != "lit") {
//				$(this).stop().addClass("hover");
//			}
//	}, function(){
//			$(this).stop().removeClass("hover");
//	});
//
//	$("ul#imagelist li a").focus(
//		function(){
//			var currentClass = $(this).attr("class");
//			if (currentClass != "lit") {
//				$(this).stop().addClass("hover");
//		}
//	});
//	$("ul#imagelist li a").blur(
//		function(){
//			$(this).stop().removeClass("hover");
//		}
//	);

	//rollover for images
	
	//image rollover
	$("a.roll").bind('mouseover focus', function(event) {
		$(this).find('img').attr("src", $(this).find('img').attr("src").split('_f1').join('_f2'))
	}).bind('mouseout blur', function(event) {/*mouseout*/
		$(this).find('img').attr("src", $(this).find('img').attr("src").split('_f2').join('_f1'))
	});
	
	
//    $('.tabbar li a').click(function(){
//		$qgetcat = ($(this).attr("href").split("?")[1]);
//		//newcat = "managed_content/player.asp?" + $qgetcat;
//		newcat = $qgetcat.split("=")[1]
//
//		$('#player div.imageselection').fadeOut('fast',loader);
//		$('#player div.imageselection').fadeIn('fast');
//		
//		function loader() {
//			$('#player').fadeIn("fast", loadContent, showContent);
//    	}
//		function loadContent() {
//			$('#player').append("calling xml and xsl... ")
//			$("#player").hide().transform({
//				xslParams:{section:newcat},
//				xml:"feed/photoPlayer.xml",xsl:"xsl/player.xsl"
//			});
//			alert("category: [" + newcat + "]");
//			$("#player").hide(showContent);
//    	}
//		function showContent() {
//			$('#player').append("page loaded?!<br>");
//			$('#playercontainer').removeClass("loading");
//		//	alert("maybe here...?");
//			$('#player').fadeIn("slow", function() {
//		//		alert("or here");	
//			$('#player').trigger( 'notify', '#player' );
//			});
//    	}
//		return false;
//	});
	
});