// JavaScript Document


// REWRITES JQUERY FADE-IN FUNCTIONS TO FIX ANTI-ALIASING FOR IE
//http://jquery.malsup.com/fadetest.html
/*
jQuery.fn.fadeIn = function(speed, callback) { 
    return this.animate({opacity: 'show'}, speed, function() { 
        if (jQuery.browser.msie)  
            this.style.removeAttribute('filter');  
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
}; 
 
jQuery.fn.fadeOut = function(speed, callback) { 
    return this.animate({opacity: 'hide'}, speed, function() { 
        if (jQuery.browser.msie)  
            this.style.removeAttribute('filter');  
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
}; 
 
jQuery.fn.fadeTo = function(speed,to,callback) { 
    return this.animate({opacity: to}, speed, function() { 
        if (to == 1 && jQuery.browser.msie)  
            this.style.removeAttribute('filter');  
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
};
*/
//----------------------------------------------------------------



//----------------------------------------------------------------
//	FUNCTIONS

/* Reference: http://stackoverflow.com/questions/521291/jquery-slide-left-and-show
// Author: bendewey
// Required Resources:
//		
//		<script src="http://code.jquery.com/jquery-latest.js"></script>
//		<script src="http://ui.jquery.com/latest/ui/jquery.effects.core.js"></script>
//		<script src="http://ui.jquery.com/latest/ui/jquery.effects.slide.js"></script>
*/


		jQuery.fn.extend({
		  slideRightShow: function() {
			return this.each(function() {
				$j(this).show('slide', {direction: 'right'}, 1000);
			});
		  },
		  slideLeftHide: function() {
			return this.each(function() {
			  $j(this).hide('slide', {direction: 'left'}, 1000);
			});
		  },
		  slideRightHide: function() {
			return this.each(function() {
			  $j(this).hide('slide', {direction: 'right'}, 1000);
			});
		  },
		  slideLeftShow: function() {
			return this.each(function() {
				$j(this).css('display', 'inline-block');
			  $j(this).show('slide', {direction: 'left'}, 1000);
			});
		  }
		});





//----------------------------------------------------------------
//	VARIABLES

var paddingLeft_num = $j('#memberLogin .inside').css('padding-left');
//alert( "paddingLeft_num: " + paddingLeft_num );

var loginWidth = 212;	//260;
var loginWidthInside = loginWidth - $j('#memberLogin .inside').css('padding-left');

//alert("loginWidthInside: " + loginWidthInside);




//----------------------------------------------------------------
//	RUNNING SCRIPT

$j(document).ready(function(){
	
	//--- INITIALIZE SETTINGS / VARIABLES
	
	//hide member login div
	//$j('#memberLogin').hide();
	
	
	//CSS --- ADD TO Clubessential2011.css
	/*
		//$j('#memberLogin').css('display', 'inline-block');
		$j('#memberLogin').css({
			'display':'inline-block !important',
			//'display':'inline-block',
			'margin-left':'0px',
			'overflow':'hidden',
			'vertical-align':'middle',
			'width':'0px'
		});
		
		$j('#memberLogin .inside').css({
			'position':'relative',
			//'display':'inline-block!important',
			//'display':'inline-block',
			'padding-left':'6px',
			//'overflow':'hidden',
			//'vertical-align':'middle',
			'width':'252px'
		});
		
		//set "need help?" link (delete...when merge with Clubessential2011.css
		$j('#memberLogin a').css('margin',0);
		$j('.advLogUsername, .advLogPassword').css('padding-left','3px');
		$j('.advLogUsername').css('width','90px');
		$j('.advLogPassword').css('width','80px');
		
		
		
		$j('#closeBtn').css({
			position:'absolute',
			top:-9,
			left:-9
		});
	
	*///--- END CSS
	
	
	/*
	//Create Wrappers
	$j('<div id="maskContainer"><div id="maskInside"><div id="maskContent">').insertBefore('#memberLogin');
	$j('</div></div></div>').insertAfter('#memberLogin');

		//load css for wrappers	
		$j('#maskContainer').css({
			'position':'absolute',
			'width':'350px',
			'height':'200px',
			'background':'#333'
		});
		$j('#maskInside').css({
			'position':'absolute',
			'width':'200px',
			'height':'300px',
			'background':'#666'
		});
		$j('#maskContent').css({
			'position':'absolute',
			'width':'650px',
			'height':'400px',
			'background':'#999'
		});
	
	
		//load content for #maskContent
		$j('#maskContent').text('Suspendisse bibendum egestas nulla, at dictum velit rhoncus sed. Pellentesque luctus, ante at vestibulum tristique, ipsum neque ornare nunc, sit amet tincidunt metus purus eget est. Aliquam tempus auctor convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis quis auctor nisi. Morbi nunc purus, convallis vel pulvinar in, pulvinar a massa.');
	
	*/
	
	
	
	
	//Login Button Controls
	$j('#loginBtn').click(function(){
		//$(this).animate( {opacity: '0'}, 500);
		
		/*
		$(this).fadeOut(
			500,
			function() {
				$('#memberLogin').fadeIn(500);
			}
		);
		*/
		
		//$j(this).hide();					//hide loginBtn
		//$j(this).css('cursor', 'default');
		
		//$j('#closeBtn').show();				//show #closeBtn
		//$j('#closeBtn').css('cursor', 'pointer');
		
		
		
		//$j('#memberLogin').fadeIn(500);	//fade in Login Plugin div
		//$j('#memberLogin').slideIn(500);	//slide in Login Plugin div
		//$j('#memberLogin').show('slide', {direction: 'left'}, 1000);
		/*
		$j('#memberLogin').slideDown('slow', function(){
			
			//$j(this).click(function() {
			if( $j('#memberLogin').is(':visible') ) {
				alert('shown');
				alert($j('#memberLogin').is(':visible'));
			}			
			else {
				alert('hidden');
			}
				
			
			
		});
		*/
		
		/* METHOD 2:	Thinking I could use css to position to correct spot...then when hidden...
						Set position to top -200px or something.  Click to show...will then set position to startPos variable
						or something
		$j('#memberLogin').css('position', 'relative');
		$j('#memberLogin').css('display', 'inline-block');
		$j('#memberLogin').slideLeftShow();
		*/
		
		//if( $j('#memberLogin').is(':visible') ) {		//only evaluates true when display:none;
		if( $j('#memberLogin').width() == loginWidth ) {
			//alert("hide login");
			
			//change value of loginBtn innerHTML
			//$j(this).text('Corporate Login');
			
			//hide login
			//$j('#memberLogin').hide(200);
			
			/*//WORKS (8-23-11)
			$j('#memberLogin').animate(
				{'width':'0px'},
				{duration:1000, queue:true}
			);
			*/
			
			/*
			$j('#memberLogin').animate(
				{'display':'inline-block!important',
				'width':'toggle'
				},
				{duration:1000, queue:true}
			);
			*/
		}			
		else {
			//alert("show login");
			
			//Show CloseBtn
			$j('#closeBtn').show();				//show #closeBtn
			$j('#closeBtn').css('cursor', 'pointer');
			
			
			/* METHOD 2 --- WHEN ONLY USING ONE BUTTON --- KEEP WORKING UNTIL GET FEEDBACK */
			//change value of loginBtn innerHTML
			//$j(this).text('Close Login');
			
			//show login
			//$j('#memberLogin').show(500);
			
			$j('#memberLogin').animate(
				{'width':loginWidth},
				{duration:750, queue:true}
			);
			
			
			
			
			
			/*
			$j('#memberLogin').animate(
				{'display':'inline-block!important',
				'width':'toggle'
				},
				{duration:2000, queue:true}
			);
			*/
		}
		
		
		
		
	});
	
	
	//Close Button Controls
	$j('#closeBtn').click(function(){
		
		//set css
		//$j(this).hide();					//hide closeBtn
		$j(this).css('cursor', 'default');
		
		
		//$j('#loginBtn').show();				//show #loginBtn
		//$j('#loginBtn').css('cursor', 'pointer');
		//$j('#loginBtn').text('Corporate Login');		//change value of loginBtn innerHTML
		
		
		//Fade Out while sliding out #memberLogin
		//$j(this).fadeOut(250);
		$j('#memberLogin').animate(
			{'width':'0px'},
			{duration:750, queue:true}
		);
		
		
		/*// Fade Out closeBtn first, then when complete, start animating memberLogin out.
		$j(this).fadeOut(250, function() {
			$j('#memberLogin').animate(
				{'width':'0px'},
				{duration:1000, queue:true}
			);
			
		});
		*/
		
		//$j('#memberLogin').fadeOut(500);	//fade out Login Plugin div
		
		
		
		
	});
	
	
	
	/*
	var hidepos = $('.hide').offset().left;
	var slidepos = $('.slide').offset().left;
	
	$('.toggle').click(function() {
		var goto = ($('.slide').offset().left < slidepos) ? slidepos : hidepos;
	
		$('.slide').css({
			'left' : $('.slide').offset().left,
			'position' : 'fixed',
		}).animate({
			'left' : goto,
		}, function() {
			$(this).css('position', 'static');
		});
	
		$('.hide').animate({
			'opacity' : 'toggle',
		});
	});
	*/

	
	
	
	
});