$(document).ready(function(){

	$("#alphaNav > li").hover(
		function(){$(this).find('ul').stop(true,true).slideDown()},
		function(){$(this).find('ul').slideUp()}
	);
	$("#alphaNavES > li").hover(
		function(){$(this).find('ul').stop(true,true).slideDown()},
		function(){$(this).find('ul').slideUp()}
	);
	
	$('#contentNav li').click(
		function() {
			if(!$(this).hasClass('slctd')){
				$('#contentNav li').removeClass('slctd');
				
				var index = $('#contentNav li').index(this);
				var tagDiv = $('.slide_cont');
				
				//alert($(tagLi[index]).html());
				$('.slide_cont').hide('');
				
				$(this).addClass('slctd');
				$(tagDiv[index]).show('');
			}
			//return false;
		}
	);
	//start feature slider
	$('div.slideshow')
		.before('<div id="nav">')
		.cycle({
		fx:     'scrollLeft',
		cleartypeNoBg: true,
  		startingSlide: 0,
		timeout: 12000,
		pager:  '#nav'
	});

	//Get our elements for faster access and set overlay width
	var div = $('div.sc_menu'),
		ul = $('ul.sc_menu'),
		ulPadding = 15;

	//Get menu width
	var divWidth = div.width();

	//Remove scrollbars
	div.css({overflow: 'hidden'});

	//Find last image container
	var lastLi = ul.find('li:last-child');

	//When user move mouse over menu
	div.mousemove(function(e){
		//As images are loaded ul width increases,
		//so we recalculate it each time
		var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
		//alert(lastLi.offset().left);

		var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
		//alert(div.offset().left);
		//alert(e.pageX);

		div.stop(true,true).animate({scrollLeft:left}, 'slow');
	});

	$('ul.sc_menu li a').hover(

		function(){
			img_src = $(this).children('img').attr('src');
			$(this).children('img').attr('src', img_src.split('.jpg',1) + '_large.jpg').stop(true, true).animate({top: '-40px'},500).css('z-index',13);
   			//$(this).parents('li').animate({width: 368, height: 168},250).css();


		},
		function(){
			img_src = $(this).children('img').attr('src');
			$(this).children('img').attr('src', img_src.split('_large.jpg',1) + '.jpg').stop(true, true).animate({top: '0px'},500).css('z-index',0);
			//$(this).parents('li').animate({width: 278, height: 128},250);


		}
	);
	$('ul.sc_menu li a').click(
		function(){
   			img_src = $(this).children('img').attr('src');
			$(this).children('img').attr('src', img_src.split('_large.jpg',1) + '.jpg').stop(true, true).animate({top: '0px'},500).css('z-index',0);
   		});


	$("a#twitter").hover(
	  function () {
	    $(this).stop(true,false).animate({top: 0},250, function() {
  			$('#twitter_blurp').fadeIn(100);
		  });
	  },
	  function () {
	    $(this).stop(true,false).animate({top: -20},250, function() {
			 $('#twitter_blurp').fadeOut(2000);
		  });
	  }
	);

	//start right accordion
	$( "#accordion" ).accordion({ clearStyle: true,autoHeight: false, active: 2 });
	makeScrollable("div#accordion_container", "div#accordion");

	$("#twitter_blurp").getTwitter({
		userName: "JVCMobile",
		numTweets: 1,
		loaderText: "Loading tweets...",
		slideIn: false,
		slideDuration: 750,
		showHeading: false,
		headingText: "Latest Tweets",
		showProfileLink: false,
		showTimestamp: false
	});

});

function makeScrollable(wrapper, scrollable){
	// Get jQuery elements
	var wrapper = $(wrapper), scrollable = $(scrollable);

	// Hide images until they are not loaded
	scrollable.hide();
	var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);

	// Set function that will check if all images are loaded
	var interval = setInterval(function(){
		var images = scrollable.find('img');
		var completed = 0;

		// Counts number of images that are succesfully loaded
		images.each(function(){
			if (this.complete) completed++;
		});

		if (completed == images.length){
			clearInterval(interval);
			// Timeout added to fix problem with Chrome
			setTimeout(function(){

				loading.hide();
				// Remove scrollbars
				wrapper.css({overflow: 'hidden'});

				scrollable.slideDown('slow', function(){
					enable();
				});
			}, 1000);
		}
	}, 100);

	function enable(){
		// height of area at the top at bottom, that don't respond to mousemove
		var inactiveMargin = 100;
		// Cache for performance
		var wrapperWidth = wrapper.width();
		var wrapperHeight = wrapper.height();
		// Using outer height to include padding too
		var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
		// Do not cache wrapperOffset, because it can change when user resizes window
		// We could use onresize event, but it's just not worth doing that
		// var wrapperOffset = wrapper.offset();

		//When user move mouse over menu
		wrapper.mousemove(function(e){
			var wrapperOffset = wrapper.offset();
			// Scroll menu
			var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;

			if (top < 0){
				top = 0;
			}

			wrapper.scrollTop(top);
		});
	}

}