var facebookURL;
function facePop()
{
    var facePopUp = window.open("http://www.facebook.com/sharer.php?u="+
			   																			encodeURIComponent(facebookURL), "FacebookPopUp", "location=1,status=1,scrollbars=0,  width=500,height=400");
    return false;
}


jQuery(document).ready(function($) {

	var $tdh = $('#tundra-details-holder');
	var $td = $('#tundra-details');
	var $dc = $('#tundra-details-content');
	var ind;
	var head;
	var cont;
	var scr;

	//click a tab
	$tdh.find('.tab').click(function() {
		//change z-index to be above everything
		$tdh.css('z-index',300);
		//define paragraph relating to tab
		ind = $(this).index();

		head = $tdh.find('.hidden-details .cont-holder').eq(ind).find('h1').clone();
		cont = $tdh.find('.hidden-details .cont-holder').eq(ind).find('.content').clone();

		//change header if no pin or no hat selected
		if(curPin == "" && curColor != "" && ind == 1)
		{
			head.text('Hat Detail');
		} else if(curPin != "" && curColor == "" && ind == 1)
		{
			head.text('Pin Detail');
		}

		//add pin name to details if details
		if($(this).hasClass('details-tab') && curPin != "")
		{
			cont.find('h3.pin-details-head').text(curPin+" Pin")
		}

		if($(this).hasClass('details-tab') && curPin == "" && curColor != "")
		{
			//remove pin detail
			cont.find('.pin-details').remove();
			cont.find('h3.pin-details-head').empty();
		} else if($(this).hasClass('details-tab') && curPin == "" && curColor == "")
		{
			cont.find('h3.pin-details-head').text('Sport Pin');
		} else if($(this).hasClass('details-tab') && curPin != "" && curColor == "")
		{
			cont.find('.hat-details').remove();
			cont.find('h3.hat-details-head').empty();
		}

		//set var to actual text representation
		head = head.html();
		cont = cont.html();

		if($dc.css('right') == '-30px')
		{
			$dc.find('.content').fadeOut('fast',function() {
				$dc.find('h1').html(head);
				$(this).html(cont);
					
				if(scr)
				{
					scr.destroy();
				}
				$(this).fadeIn('fast',function() {
				});
				//have to call slightly after because plugin won't work on 
				//hidden elements
				var createScroll = function() {
					scr = $dc.find('.scroll-content').jScrollPane({showArrows:true,
											verticalArrowPositions: 'after',
											horizontalArrowPositions: 'after'}).data().jsp;
				}
				setTimeout(createScroll,10);
			});
		} else
		{
			$dc.find('h1').html(head);
			$dc.find('.content').html(cont);
			scr = $dc.find('.scroll-content').jScrollPane({showArrows:true,
										verticalArrowPositions: 'after',
										horizontalArrowPositions: 'after'}).data().jsp;
			$dc.animate({
				'right':-30
				},
				500, function() {
					//fade in text
					$dc.find('.content').fadeIn();
				})
		}

		//begin loading image for sharing if sharing opened
		if($(this).hasClass('share-tab'))
		{
			//get current model hat and pin and create image via gd using ajax
			var params = {};
			var $dv = $('#hat-images .hat-image').eq(0);
			params.hatSrc = $dv.find('.models-hat').attr('src');
			params.pinSrc = $dv.find('.models-pin').attr('src');
			$.ajax({
			   type: "POST",
			   url: baseURL+"scripts/image-sharing.php",
			   data: params,
			   success: function(data){
			   	var img = baseURL+'scripts'+data.substr(1);
			   	//replace image loading with image
			   	//get corresponding url
			   	facebookURL= baseURL+"?_escaped_fragment_="+curModel.replace(/ /g,'_')+'/'+curColor.replace(/ /g,'_')+'/'+curPin.replace(/ /g,'_');
			   	$('#face-image-share').replaceWith('<div id="face-image-share"><img src="'+img+'?'+new Date().getTime()+'"/><br/><br/>'+
			   																			'<a href="http://www.facebook.com/sharer.php?u='+
			   																			encodeURIComponent(facebookURL)+'" target="_blank" onclick="return facePop()">Share on Facebook</a></div>');

			   }
			 });
		}
	})

	$dc.find('.details-close').click(function() {
		$dc.animate({
				'right':-580
				},
				500,function() {
					$tdh.css('z-index',16);
				})
	});

	$(document).bind('click', function(e) {
	    var $clicked = $(e.target);
	    if (!$clicked.parents().hasClass('t-d'))
			{
				$dc.animate({
				'right':-580
				},
				500,function() {
					$tdh.css('z-index',16);
				})
			}
	});

	//happiness guarantee
	$('#happiness-link').fancybox({
		'autoDimensions':false,
		'width':600,
		'height':136,
		'padding':0,
		'margin':0,
		'onComplete':function() {
			jQuery('#fancybox-content div').css('overflow','visible');
		}
	});
})