$(document).ready(function() {

/********************************************************************
Navigation
*********************************************************************/


// http://stackoverflow.com/questions/1350666/jquery-ui-tabs-available-fx-options
// http://www.packtpub.com/article/tabs-in-jquery-user-interface-ui-1.7-1
// http://stackoverflow.com/questions/1549244/jquery-ui-tabs-ajax-load-specific-content-of-page




// $(function() {
// 		$("#nav").tabs();
// });

/*ar-2010.03.24:
- The code below for jQuery UI Tabs with AJAX is probably not going to work.
- Mainly beacuse it is difficult to execute additional Javascript (particularly jQuery) that should effect the code in the remote page to be loaded in.
- It's very hairy.
- There is a possible workaround via the Live Query jQuery plugin: <http://brandonaaron.net/blog/2007/08/19/new-plugin-live-query>
- For now, I think I'm going to just add the code for each tab directally into the index.html page and not use the AJAX loading of content for tabs.
- One way to save bandwidth might be to use a Jquery script to only load images when they come into view.
*/
$(function() {
	$("#nav").tabs({

		fx: {opacity: 'toggle', duration: 'fast'},
		//selected: 0,	// selects the first tab. Start with 0. -1 = no tab selected.
		//cache: true,	// when true, loads contents once, then references cache.
		spinner: 'Retrieving data...',

		ajaxOptions: {
						
			//async: false, // This makes the press images work with additional jQuery the first time, but it stops working after tabs are switched and then you go back to the Press tab.
			
			error: function(xhr, status, index, anchor) {
				$(anchor.hash).html("Couldn't load this tab...");
			},
			dataFilter: function(data, type){
				return $(data).filter("div#contentcontainer").children().html();
			}
		}
	});
	
	// 2010.03.13
	// This was some clever code I wrote to try to override the "selected" variable above.
	// It might have worked, but I'm not sure.
	// Ultimatly, it is unnecessary because I have turned off the "selected" variable since auto selecting the first tab is all I need.
	//
	//getter
	// var hash = location.hash;
	// 
	// if (hash == ''){
	// 	var selected = $('#nav').tabs('option', 'selected');
	// 	//setter
	// 	$('#nav').tabs('option', 'selected', 0);	
	// }
	
}); // End $("#nav").tabs()

// Method to get the hash into the URL on click, so if someone bookmarks it will autoload that "tab" based on the URL with the particular tab's hash.
// http://dev.jqueryui.com/ticket/4587

$('#nav ul li a').click(function () {location.hash = $(this).attr('href');});

// Alternative method (works, but seems slower):
// http://chwang.blogspot.com/2010/02/jquery-ui-tabs-updating-url-with-hash.html




// 2009.12.15/ar
// hash based content loading for the old "pre-jQuery UI Tabs" tabs.
// If "esquivelshoes.com/#aboutus" then show the aboutus content
// 
// Reference:
// http://old.nabble.com/Using-%22window.location.hash%22-for-URLs-without-plugin-td20859138s27240.html
// http://stackoverflow.com/questions/790158/jquery-if-then-else-using-url-parser-plugin-quest-for-elegance-take-2

// var page = location.hash;
// 
// if (page == '#contactus') {
// 	// Do nothing, since this is the front page.
// 	// If I make this script more dynamic in the future, then this will be where
// 	// The "contact" link will become highlighted.
// }

// if (page == '#aboutus') {
// 	$("#nav").addClass('about');
// 	$("#nav").removeClass('contact');
// 
// 	$("#pagecontent #contact").fadeOut('fast');
// 	$("#pagecontent #about").fadeIn('slow');
// }


// END Navigation
///////////////////////////////////////////////////////






















/********************************************************************
Slideshow
*********************************************************************/

// 2008.10.20: Changed "speed" from "600" to "800".
$('#shoeslideshow').cycle({ 				
	    fx:     'fade', 
	    speed:   800, 				
	    timeout: 5000,
		prev:   '#prev', 
	    next:   '#next',
	    pause:   0
	 });
	
// controller				

// more complex "slide in/out with fade"

$("#matte").hover(function() {
	$("#matte #controller").animate({
	    height: 'show',
	    opacity: 'show'
	}, '0.4');
		}, function() {
			$("#matte #controller").animate({
			    height: 'hide',
			    opacity: 'hide'
			}, '0.4');
});


// Global for the "title=" attribute that is set depending on the play/pause state of the slideshow.
var $title_resume = "Click to RESUME the Slideshow";
var $title_pause = "Click to PAUSE the Slideshow";

// Sets the inital "title" for #shoeslideshow
// This is done in jQuery, since if js was off, the slideshow wouldn't work and I wouldn't want them to see a "tooltip" that stated "PAUSE" or "RESUME" if there were no slideshow happening.
$("#shoeslideshow").attr("title", $title_pause);

//$('#shoeslideshow').css({'cursor': 'pointer'});


/////////////////////////////////////////////////////
// play/pause functionality and button visual switch

$("#matte #controller a#pause").click(function() {
	$('#matte #shoeslideshow').cycle('toggle', true);
	$("#matte #controller a#play").show();
	$("#matte #controller a#pause").hide();
	$("#shoeslideshow").attr("title", $title_resume);
});

$("#matte #controller a#play").click(function() {
	$('#matte #shoeslideshow').cycle('toggle', true);
	$("#matte #controller a#play").hide();
	$("#matte #controller a#pause").show();
	$("#shoeslideshow").attr("title", $title_pause);
});


/////////////////////////////////////////////////////
// next/previous "pause on click"

$('#matte #controller #next, #matte #controller #prev').click(function() {
	$('#matte #shoeslideshow').cycle('pause');
	$("#matte #controller a#play").show();
	$("#matte #controller a#pause").hide();
	$("#shoeslideshow").attr("title", $title_resume);
});


/////////////////////////////////////////////////////
// play/pause functionality and button visual switch with the ability to click on the #matte to toggle play/pause.
// finally got to work on 2010.04.05. The trick was cycle: 'toggle'.

$('#shoeslideshow').click(function() {
	$('#matte #shoeslideshow').cycle('toggle', true);

	if ($("#matte #controller a#play").is(":visible")) {
		$("#matte #controller a#play").hide();
		$("#matte #controller a#pause").show();
		$("#shoeslideshow").attr("title", $title_pause);
	} else {
		$("#matte #controller a#play").show();
		$("#matte #controller a#pause").hide();
		$("#shoeslideshow").attr("title", $title_resume);
	}
});






// From Mike Alsup.
// Test in the future:
// 
// (function() {
//    $('#mySlideshow').cycle();
//    var isRunning = true;
// 
//    $('#pauseAndPlayButton').click(function() {
//        // update image
//        $(this).attr('src', isRunning ? 'play.png' : 'pause.png');
//        isRunning = !isRunning;
//    });
// })();


// END Slideshow
///////////////////////////////////////////////////////






















/********************************************************************
"Press" Page
*********************************************************************/

// $('div.magazinegroup img').each(function() {
//     var $this = $(this);
//     var href = this.src.replace("/thumbnails", "");
//     var title = $this.attr('alt');
//     $this.wrap('<a href="' + href + '" title="' + title + '"></a>');
// });



// ar-2010.03.26
// - jQuery Equivilant of -webkit-transition Fade In/Out of thumbnails on hover.

if(!$.browser.webkit && !$.browser.msie){

	var $imgopacityoff = 0.19;
	var $spancolor = $('.magazinegroup a span').css('color');
	var $h3color = $('.magazinegroup h3').css('color');

	//$('.magazinegroup a img').css('opacity', $imgopacityoff);

	$('.magazinegroup').hover(function() {
		$('img', this).stop().animate({opacity: 0.3}, 115);
		$('h3', this).stop().animate({color: "white", borderBottomColor: 'white'}, 115);
	}, function() {
		$('img', this).stop().animate({opacity: $imgopacityoff}, 115);
		$('h3', this).stop().animate({color: $h3color, borderBottomColor: $h3color}, 115);
	});

	$('.magazinegroup a').hover(function() {	
	//	$(this).siblings().children('img').animate({opacity: 0.5}, 115);
		$('img', this).stop().animate({opacity: 1}, 115);
		$('span', this).stop().animate({color: 'white'}, 115);	

		//$('img', this).event.stopPropagation();

	}, function() {
		// $('img', this).stop().animate({opacity: 0.5}, 115);
		$('img', this).stop().animate({opacity: $imgopacityoff}, 115);
		$('span', this).stop().animate({color: $spancolor}, 115);
	});

	//	$('.magazinegroup').stopPropagation();
	
}; // end if NOT webkit


$('.magazinegroup a.new').append('<strong>New!</strong>');


// Fancybox
// http://fancybox.net/howto

$(".magazinegroup a").fancybox({
	'transitionIn'	:	'elastic',
	'transitionOut'	:	'elastic',
	'speedIn'		:	400, 
	'speedOut'		:	400, 
	'hideOnContentClick'	:true,

	'easingIn':'easeOutCubic',
	'easingOut':'easeInCubic',

	'padding'		: 	5,
	'opacity'		: 	true,

	'overlayShow'	:	true,
	'overlayOpacity'	:0.7,
	'overlayColor'	:'black',
	
	'titlePosition':'outside'
});

// End "Press" Page
///////////////////////////////////////////////////////





/********************************************************************
"Handmade" Shoe Slideshow Video + Thumbnail
*********************************************************************/

/*
Reveal the thumbnail
*/

// $('#videothumb').css({'margin-top' : '7px', 'opacity' : '0'});
// $("#videothumb").delay(1600).animate({'margin-top': '-=7px', 'opacity': '1'}, 450);
// $("#videothumb span").delay(1100).animate({'opacity': '1'}, 450);

//$('#videothumb').css({'margin-top' : '3px', 'opacity' : '0'});
//$("#videothumb").delay(1600).animate({'margin-top': '-=3px', 'opacity': '1'}, 450);

$('#videothumb').css({'margin-top' : '10px', 'opacity' : '0'});

$('#videothumb').delay(2000).animate({
  'margin-top': '-=10px',
  'opacity': '1'
}, {
  duration: 450, 
  specialEasing: {
    width: 'linear',
    'margin-top': 'easeOutBounce'
  }
});




// $('#videothumb').css({'opacity' : '0'});
// $("#videothumb").delay(20).animate({'opacity': '1'}, 500);
//$("#videothumb #thumb").css('opacity', '0.5');

var $texttitle = $('#videothumb strong').css('color');
var $textsubtitle = $('#videothumb em').css('color');

//$("strong").css({'color' : '#867f83'});

// $("#videothumb").hover(function() {
// 	$("#thumb").animate({'opacity' : '1'}, 250);
// 	$("strong").animate({'color' : $texttitle}, 250);
// }, function() {
// 	$("#thumb").animate({'opacity' : '0.5'}, 250);
// 	$("strong").animate({'color' : '#867f83'}, 250);
// });

//$("#videothumb").animate({'top': '-=10px'});






/*
Fancy Box and Mobile Safari detection

- "Vimeo - URL of mobile version?" - http://vimeo.com/forums/topic:22207
*/


var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad|BlackBerry)/);

if (agentID) {
	$("#videothumb a").click(function() {return true;}); // If Mobile Safari (iPhone, iPod, iPad)

} else {
	
	// http://groups.google.com/group/fancybox/browse_thread/thread/e5067d93a3893d28/4406cb29520be48e?lnk=raot
	// http://fancybox.net/vimeo
	$("#videothumb a").click(function() {
		$.fancybox({
			'transitionIn'	:	'fade',
			'transitionOut'	:	'fade',
			'speedIn'		:	400, 
			'speedOut'		:	400,
			'padding'       : 5, 

			'easingIn':'easeOutCubic',
			'easingOut':'easeInCubic',

			'opacity'		: 	true,

			'overlayShow'	:	true,
			'overlayOpacity'	:0.7,
			'overlayColor'	:'black',

			'titlePosition':'outside',

			//title'                 : this.title,
			'title'                 : '\"Handmade\"', 
			'width'                 : 640, 
			'height'                : 424, 
			'href'					: this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1') + '&amp;fullscreen=1',
			'type'                  : 'swf',
			'swf'					: {'wmode' : 'transparent', 'allowfullscreen' : 'true'}
		}); 
	return false; 
	});
}

// End "Handmade" Shoe Slideshow Video + Thumbnail
///////////////////////////////////////////////////////















/********************************************************************
Google Analytics Tracking
*********************************************************************/

/********************************************************************
- Current:
http://aktagon.com/projects/jquery/google-analytics
http://github.com/christianhellsten/jquery-google-analytics

- To Test:
http://weblogs.asp.net/wesleybakker/archive/2010/03/26/google-analytics-and-jquery-happy-together.aspx
http://think2loud.com/use-jquery-with-google-analytics-to-track-clicks-on-outgoing-links-from-your-site/

- Tried + Failed:
http://briancray.com/2009/12/29/understanding-user-behavior-google-analytics-event-tracking-jquery/#comments
*********************************************************************/

$.trackPage('UA-5611532-1')

$('a').track({ skip_internal : 'false'});


$('#videothumb').track({
	category : 'Hamdmade Video Slideshow'
});

$('#controller #buttons').track({
	category : 'Shoe Slideshow Controller'
});

$('#nav ul li').track({
	category : 'Navigation'
});





$('#contact').track({
	category : 'Contact'
});

$('#press .magazinegroup #group-print').track({
	category : 'Press: Print'
});

$('#press .magazinegroup #group-online').track({
	category : 'Press: Online'
});

//$.fn.track.defaults.debug = true;


/********************************************************************
End: Google Analytics Tracking
*********************************************************************/








}); // end jQuery $(document).ready(function() {


















/********************************************************************
non-jQuery
*********************************************************************/

try {
document.execCommand('BackgroundImageCache', false, true);
} catch(err) {}

// More information:
// http://ajaxian.com/archives/no-more-ie6-background-flicker
// http://fivesevensix.com/studies/ie6flicker/




// Google Asynchronous Tracking
// http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html

// Disabled on April 24, 2010 to test aktagon.com jQuery Google Analytics Tracking

// var _gaq = _gaq || [];
// _gaq.push(['_setAccount', 'UA-5611532-1']);
// _gaq.push(['_trackPageview']);
// 
// (function() {
// 	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
// 	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
// 	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
// })();