// 
//	Not currently a low pro object but this is a behavior
// - i think it is best not to build the object until 
// - we know better how future implementations will work

// DOM Ready
//
$(function (){

	// Gather some useful elements
	//
	var $flipWrapper = $('#flipWrapper');
	var $flipper = $('#flipbox');	
	var $frontOfCard = $('#flipfront');//.remove();
	var $backOfCard = $('#flipback').remove();
	var $flipToggles = $('.flipcontrol');
	var $frontPreview = $('#cardFrontContent');
	
	// initially disable the flip button and give it a loading bg
	var flipLinkBg = $flipToggles.find('a').css('backgroundImage');
	$flipToggles.click(function (){ return false; }).find('a').css({'backgroundImage': 'url(/img/image-ajax-loader.gif)'});	// disabled to begin with

	// Grab the contents of the preview content area for later use when we update with the final image
	var previewContent = $frontPreview.html();
	
	// see if there is an imgsrc in the url params
	try{
		kvPairs = unescape(document.location.search).split('?')[1].split('&');
		$(kvPairs).each(function(i, kv){
			pair = kv.split('=');
			if(pair[0] == 'imgsrc'){ hotImage = pair[1]; }
		});
	}catch(e){
		// probably clicktale playback
		hotImage = clickTaleDummyImage;
	}
	
	if(hotImage){
		// update the preview content to be a loading screen
		$frontPreview.html(
			'<div id="previewLoadingContent">' +
			'	<p id="previewLoadingMessage">' +
			'		<img src="http://www.touchnote.com/designs/onlive/postcard/loading-image.png" />' +
			'	</p>' +
			'	<img width="525px" src="'+hotImage+'" id="previewLoadingImage"/>' +
			'</div>'
		);	
		// display all pls
		$flipWrapper.fadeIn('slow');
	}
	
	isPreviewDataLoaded = function (){
		if(typeof $(document).data('locPath') != 'undefined'){
			clearInterval(timer);
			return true;			// we have the path for the final image
		}else{ return false; }
	}

// we need to check to see if the ajax request for the imag src has given us a path yet
	var imagePreloader = new Image();					// Our image to load
	var timer = setInterval(function(){
		if(isPreviewDataLoaded()){
			imagePreloader.src = $(document).data('locPath');		// begin downloading the virtual image
		}
	}, 50);
	
// final image has loaded into memory
	$(imagePreloader).load(function(){
		
// get rid of the loading view			
		$frontPreview.html(previewContent);		// replace with the correct stuff
		$frontPreview.find('img:first').attr('src', imagePreloader.src);
		showPreview();					// get flipping
	});
	
	
	// it's al loaded sp 
	showPreview = function (){
	
		// Initialise Front
		$flipper
			.html($frontOfCard.get(0)) 			
			.data('from', $frontOfCard)
			.data('to',   $backOfCard);
		$flipper.data('from').fadeIn('slow');

		// Toggle flipping Event Handling
		//
		$flipToggles.click(function (){
			$flipElement = $flipper;
			$flipElement.flip({
				direction: 'tb',		// Possible values: 'tb', 'bt', 'lr', 'rl' (default:'tb')
				bgColor: '#c49c63', 	// Flip element starting background color
				color: '#c49c63',  		// Flip element ending background color
				speed: 300,				// Speed of the two animations 
				onBefore: function(){
					// Fade old out
					this.temp = $flipElement.data('from');
					$flipElement.data('from').fadeOut('slow');
					$flipElement.data('from', $flipElement.data('to'));
				},
				onAnimation: function(){
					// switch the contents of the flipbox
					$flipElement.data('to').fadeIn('slow');
					$flipper.html($flipElement.data('from').get(0));
				},
				onEnd: function(){
			
					// Set the next destination data elem
					$flipElement.data('to', this.temp);	
					// not a great place to put this but
					// as we are removing the back from the DOM 
					// the AddressPopup needs to be reinitialised every time
					$("#addressPanel").attach(AddressPopup, {
						opener: "#addressLines",
						revalidate: sSideValidationErrsOccured // sSideValidationErrsOccured set in view
					});

				}
			});
			return false;
		});
		
		// display all
		$flipWrapper.show();

		$flipToggles.find('a').css({'backgroundImage': flipLinkBg});

	}
	
}); // end dom ready



// @requires markup. 
/*
<style>
	#flipWrapper{margin: 0px 100px;display: none;width: 790px;height: 563px;overflow: hidden;}
	.cardPanel{width: 790px;height: 563px;}
	#flipbox{background: transparent;}
	#flipback{background: transparent url(http://testing.touchnote.com/img/landing/postcard/newpostbg.png) top left no-repeat;}
	#flipfront{ background: transparent;padding: 30px;}
</style>
<div id="flipWrapper"><!-- // A wrapper for positioning the whole flipper // -->
	<div id="flipit" class="flipcontrol"><a href="#">flip it</a></div>
	<div id="flipbox"></div>
	<div id="flipfront" class="cardPanel"><!-- // FRONT OF CARD (displays first) //--></div> 
	<div id="flipback" class="cardPanel"><!-- // BACK OF CARD //--></div>
</div>
*/