/* 
plugin for setting up jcarousels with callbacks
this is used throughout the site, so dont mess with it without testing extensively
*/
$.fn.jCarouselInit = function(opts){
	var options = jQuery.extend( {
		next: '.next',
		prev: '.prev',
		scroll: 1,
		buttonNextHTML: null,
		buttonPrevHTML: null,
		wrap:'last'
	},opts);

	var jCarouselInitCallback =  function(c){
		jQuery(options.next).bind('click', function() {
			c.next();
			return false;
		})

		jQuery(options.prev).bind('click', function() {
			c.prev();
			return false;
		});
		
	}
	options.initCallback = jCarouselInitCallback;

	$(this).jcarousel(options)

};

/* makes image switchers using cycle for rotator and cufon for text */
$.fn.switcher = function(opts) {
	var g = $('#hero p').html();
	$('#hero').append(g);
	$('#hero p').remove();
	$('#hero a span,#category-hero a span').css({
		display:'none'
	});
	
	var cycleOpts = opts.cycle ? opts.cycle : null;
	var cufonOpts = opts.cufon ? opts.cufon : null;
	
	var cycleOptions = jQuery.extend( {
		fx:     'fade', 
		timeout: 5000,
		speed: 300,
		pager: '#hero-nav',
		pagerAnchorBuilder: function(idx, slide) {
			var id = idx + 1;
			var c = idx==2 ? 'last' : '';
			return '<li class="' + c + '"><a href="#" rel="' + id + '">' + $('span', slide).remove().text() + '</a></li>'; 
		},
		after: function(){
			$('.hero-controls li a').css('color','#1E3C70');
			$('.hero-controls li.activeSlide a').css('color','#45A2D1');
			Cufon.refresh('#hero-nav li a');
		}
	},cycleOpts);
	
	var cufonOptions = jQuery.extend({
		css: {
			fontFamily: 'conduit', 
			hover: {color:'#45A2D1'}
		},
		navId: 'hero-nav',
		navClass: 'hero-controls clearfix'
	}, cufonOpts);

	$(this).after('<ul id="' + cufonOptions.navId + '" class="' + cufonOptions.navClass + '">');
	$(this).cycle(cycleOptions);
	Cufon.replace('#' + cufonOptions.navId + ' li a', cufonOptions.css);
	
	/* style this thing */
	$('.hero-controls li').css({
		marginTop:'0',
		float:'left',
		width:'33%',
		padding:'0',
		textAlign:'center'
	});
	
	$('.hero-controls li a').css({
		font:'bold 18px Helvetica, Arial, sans',
		textTransform:'uppercase',
		display:'block',
		width:'100%',
		lineHeight:'20px',
		padding:'12px 0 8px 0'
	})
	.hover(function(){
		$(this).css('text-decoration','none');
	});
	
	$('#category-promo').css('margin-bottom', '50px');
	
	$('#hero-nav').css({
		marginTop:'2px',
		background:'#E8EBF0',
		clear:'both'
	});
	$('.hero-controls li.activeSlide a').css('color','#45A2D1');
	
};
	

/* plugin for autoclearing inputs when the user clicks on them */
$.fn.inputDefaultState = function(options){
	var options = jQuery.extend( {
		text: 'Search'
	},options);

	$(this)
		.val(options.text)
		.focus(function(e){
			if($(this).val() == options.text)
				$(this).val('');
		}).
		blur(function(e){
			if (this.value === '') {
                this.value = options.text;
            }
		});
}

/**
 * makes a 'mega menu' for a shoe type/size selector
 * the plugin is very dependent on the structure of the menu markup, so 
 * be careful when editing the menu html
 *
 */

$.fn.makeMegaMenu = function(options){
	
	var options = jQuery.extend( {
		interval: 500,
		sensitivity: 4,
		over: addKedsMega,
		timeout: 50000000,
		out: removeMega,
		hoverClass: 'hovering'
	},options);
	
	function addKedsMega(){
		var mega = $(this).addClass(options.hoverClass);
		var sizeSelector = $('#size-selector', this).attr('disabled', false);
		$(this).find('select').mouseleave(function(e) {e.stopPropagation();});
		$('#category-selector', this)
			.change(function(){
				sizeSelector.attr('disabled', false);
				$('button', mega).removeClass('disabled');
			});
		
		// wire the GO button to only submit when there is a shoe type and size selected
		$('button', this).click(function(){
			if($(this).hasClass('disabled')) return false;
		});
		return false;
	}
/*
	function addProKedsMega(){
		var mega = $(this).addClass(options.hoverClass);
		$('#size-selector', this)
			.change(function(){
				$('button', mega).removeClass('disabled');
			});
		
		// wire the GO button to only submit when there is a shoe type and size selected
		$('button', this).click(function(){
			if($(this).hasClass('disabled')) return false;
		});
		return false;
	}
*/
	function removeMega(){
		$(this).removeClass(options.hoverClass);
	}

	$(this).hoverIntent(options);
	
}
