/* shampoo lounge behaviors */

var shampoo = {};


$(document).ready(function(){
	$('body').addClass('jsOn');

	shampoo.interactive.music();
	shampoo.interactive.ajaxNav();
	shampoo.interactive.staffPhotos();
	shampoo.ajax.newContent();
	//shampoo.eyecandy.bubblesInit(); // ie issues
	//shampoo.interactive.navigation(); // ie issues
});

shampoo.ajax = {
	newContent: function() {
		shampoo.interactive.customScroll();
		shampoo.interactive.linkAnimate();
		//shampoo.interactive.products(); //ie issues
		//shampoo.interactive.photos(); //ie issues
		shampoo.interactive.staffPhotos();
	}
},

shampoo.interactive = {
	music: function(){
		$('#radio').flash({
			swf: 'http://theshampoolounge.com/flash/mp3player.swf',
			width: 164,
			height: 117,
			wmode: 'transparent'
		});
	},
	
	navigation: function() {
		$('ul#nav li img.bubble').each(function(){
			var size = parseInt($(this).css('width'));
			var small = Math.ceil(0.9 * size);
			var shift = Math.floor((size - small)/2);
			$(this).css({
				'width': small + 'px',
				'height': small + 'px',
				'marginTop': shift + 'px',
				'marginLeft': shift + 'px'
			});
			var container = $(this).parents('li');
			container.hover(
				function(){
					$(this).find('img.bubble').stop().animate({
						'width': size + 'px',
						'height': size + 'px',
						'marginTop': 0,
						'marginLeft': 0
					}, 300);
				},
				function(){
					$(this).find('img.bubble').stop().animate({
						'width': small,
						'height': small,
						'marginTop': shift,
						'marginLeft': shift
					}, 300);
				}
			);
		});
	},
	
	linkAnimate: function() {
		$('.photos h2').hover(
			function(){
				$(this).animate({'marginLeft':'20px'});
			},
			function(){
				$(this).animate({'marginLeft':0});
			}
		);
	},
	
	products: function() {
		$('.products ul.products').before('<a class="prev" href="#">prev</a>').after('<a class="next" href="#">next</next>').wrap('<div class="carouselWrap"></div>');
		$('.products a.prev').before('<p class="instructions">Click left and right to view all of our product lines.</p>');
		$('.products a.next').after('<p class="instructions">Click any product line logo to view details.</p>');
		$('.products div.carouselWrap').jCarouselLite({
	        btnNext: ".next",
	        btnPrev: ".prev",
			scroll: 2,
			speed: 600,
			visible: 2
		});
	},
	
	photos: function() {
		$('.photoGallery ul.photos').before('<a class="prev" href="#">prev</a>').after('<a href="#" class="next">next</a>').wrap('<div class="carouselWrap"></div>');
		$('.photoGallery div.carouselWrap').jCarouselLite({
			btnNext: ".next",
			btnPrev: ".prev",
			scroll: 1,
			speed: 600,
			visible: 1,
			vertical: true
		});
	},
	
	staffPhotos: function() {
		$('div.staff div.cms p img').css({
			'width': '150px',
			'height': '200px',
			'zIndex': 1000
		}).parent().css({'position':'relative','height':'200px','width':'150px'}).hover(
			function(){
				$(this).find('img').css({'position':'absolute','top':0,'left':0}).stop().animate({
					'width': '285px',
					'height': '380px'
				});
			},
			function(){
				$(this).find('img').stop().animate({
					'width': '150px',
					'height': '200px'
				});
			}
		);
	},
	
	ajaxNav: function() {
		var hash = window.location.hash.substr(1);
		if (hash) {
			var toLoad = 'http://theshampoolounge.com/' + hash + ' #content';
			//var toLoad = 'http://localhost/shampoolounge/' + hash + ' #content';
			$('#wrapper').load(toLoad);
		}
		
		$('a[href^="http://theshampoolounge.com"]').live('click', function(){
		//$('a[href^="http://localhost/shampoolounge/"]').live('click', function(){
			var toLoad = $(this).attr('href')+' #content';
			$('#wrapper').empty().append('<span id="load"><img src="http://theshampoolounge.com/flash/ajax-loader.gif"><span>LOADING...</span></span>');
			//$('#wrapper').empty().append('<span id="load"><img src="http://localhost/shampoolounge/flash/ajax-loader.gif"><span>LOADING...</span></span>');
			window.location.hash = $(this).attr('href').substr(28,$(this).attr('href').length-1);
			$('#wrapper').load(toLoad, function(){
				shampoo.ajax.newContent();
			});			
			return false;
		});
	},
	
	customScroll: function(){
		$('#scrollPane').jScrollPaneRemove();
		$('#scrollPane').jScrollPane({scrollbarWidth:16});
	}
},

shampoo.eyecandy = {
	getDocWidth: function() {
		var docWidth;
		if (document.documentElement) {
			docWidth = document.documentElement.offsetWidth;
		} else if (window.innerWidth && window.innerHeight) {
			docWidth = window.innerWidth;
		}
		if ( docWidth < $('body').outerWidth() )	{
			docWidth = $('body').outerWidth()
		}
		return docWidth;
	},
	
	getDocHeight: function() {
		var docHeight;
		if (document.documentElement) {
			docHeight = document.documentElement.offsetHeight;
		} else if (window.innerWidth && window.innerHeight) {
			docHeight = window.innerHeight;
		}
		if ( docHeight < $('body').outerHeight() )	{
			docHeight = $('body').outerHeight()
		}
		return docHeight;
	},
	
	bubblesInit: function() {
		var bubblesNum = 12; // Number of bubbles on the screen
		var speed = 45; // Set Timeout value
		var bubble = new Array();
		bubble[0] = '/flash/bubbles/bubble0.png';
		bubble[1] = '/flash/bubbles/bubble1.png';
		bubble[2] = '/flash/bubbles/bubble2.png';
		bubble[3] = '/flash/bubbles/bubble3.png';
		bubble[4] = '/flash/bubbles/bubble4.png';
		var dx, xp, yp; //coordinate and position variables
		var am, stx, sty; //amplitude and step variables
		var i;
		
		dx = new Array();
		xp = new Array();
		yp = new Array();
		am = new Array();
		stx = new Array();
		sty = new Array();
		j = 0;
		
		for ( i=0; i<bubblesNum; i++ ) {
			dx[i] = 0;
			xp[i] = parseInt(Math.random()*(shampoo.eyecandy.getDocWidth()-50));
			yp[i] = parseInt(Math.random()*shampoo.eyecandy.getDocHeight());
			am[i] = Math.random()*20;
			stx[i] = 0.02 + Math.random()/10;
			sty[i] = 0.7 + Math.random();
			$('#container').append('<img class="bubbleFloat" src="' + bubble[j] + '" dx="' + dx[i] + '" xp="' + xp[i] + '" yp="' + yp[i] + '" am="' + am[i] + '" stx="' + stx[i] + '" sty="'  + sty[i] + '">');
			if (j == bubble.length-1) {
				j = 0;
			} else {
				j++;
			}
		}
		
		var floatAnim = setInterval("shampoo.eyecandy.bubblesFloat()", speed);
	},
	
	bubblesFloat: function() {
		$('.bubbleFloat').each(function(i){
			var dx = $(this).attr('dx');
			var xp = $(this).attr('xp');
			var yp = $(this).attr('yp');
			var am = $(this).attr('am');
			var stx = $(this).attr('stx');
			var sty = $(this).attr('sty');
			yp -= sty;
			if (yp < -80) {
				xp = parseInt(Math.random()*(shampoo.eyecandy.getDocWidth()-50));
				yp = parseInt(shampoo.eyecandy.getDocHeight());
				stx = 0.02 + Math.random()/10;
				sty = 0.7 + Math.random();
			}
			dx += stx;
			var offset = $(this).offset();
			var newTop = yp;
			var newLeft = parseInt(parseInt(xp) + am * dx);
			var cssObj = {
				'marginLeft' : newLeft,
				'marginTop' : newTop
			}
			$(this).css(cssObj);
			$(this).attr({
				dx: dx,
				xp: xp,
				yp: yp,
				am: am,
				stx: stx,
				sty: sty
			});
		});
	}		
}