var tooltipTimer;

$(document).ready(function() {
	
	$('#dock, #dockShadow').dockMenu({
		defaultImageSize: 150,
        maxImageSize: 199,
        triggerDistance: 199
	});
	
	$('#dock a').mouseover(function(event) {
		$('.tooltip').fadeOut(500);
		tooltipTimer = setTimeout(function() {
			var target = $('#tooltipHolder').find('.' + event.target.className);
			if ($.browser.msie) {
				target.show();
			} else {
				target.fadeIn(500);
			}
		}, 700);
	});
	
	$('#dock a').mouseout(function() {
		clearTimeout(tooltipTimer);
		if ($.browser.msie) {
			$('.tooltip').hide();
		} else {
			$('.tooltip').fadeOut(500);
		}
	});
	
	$('#menu a').click(function() {
		var trigger = $(this).attr('class');
		var boxInfo = $('#contentBox').offset();
		var action  = true;
		
		if ($(this).attr('rel') == 'active') {
			action = false;
		}
		
		$('#menu a').attr('rel', '');
		$(this).attr('rel', 'active');
		
		if (action) {
			$('#menu a').removeClass('active');
			$(this).addClass('active');
			
			switch (trigger)
			{
				case 'link1':
					var leftValue    = 170;
					var arrowValue   = 200;
					var content      = 'content1';
					var scrollTarget = '1';
					break;
				case 'link2':
					var leftValue    = 170;
					var arrowValue   = 465;
					var content      = 'content2';
					var scrollTarget = '2';
					break;
				case 'link3':
					var leftValue    = 340;
					var arrowValue   = 730;
					var content      = 'content3';
					var scrollTarget = '3';
				break;
			}
			
			if ($('#contentBox:visible').length < 1) {
				$('#contentBox').css({
					'left': leftValue + 'px'
				});
				
				$('#contentArrow').css({
					'left': arrowValue + 'px'
				});
				
				if ($.browser.msie) {
					$('#contentBox').show(10, function() {
						$('.' + content).slideDown(500, function() {
							initScroller(scrollTarget);
						});
					});
					
					$('#contentArrow').show(10, function() {
						$('.' + content).slideDown(500);
					});
				} else {
					$('#contentBox').fadeIn(500, function() {
						var box = '<div id="scrollBox' + scrollTarget + '">' + $('#scrollBox' + scrollTarget).html() + '</div>';
						
						$('#scrollBox' + scrollTarget).remove();
						$('.content' + scrollTarget).append(box);
						$('#scrollpane' + scrollTarget).css({
							'top': '0px'
						});
						$('#back' + scrollTarget).hide();
						
						$('.' + content).slideDown(500, function() {
							initScroller(scrollTarget);
						});
					});
					
					$('#contentArrow').fadeIn(500, function() {
						$('.' + content).slideDown(500);
					});
				}
			} else {
				$('#contentBox').children('div').hide();
				if (trigger != 'link2') {
					$('#contentBox').animate({
						'left': leftValue
					}, 500);
				}
				
				$('#contentArrow').animate({
					'left': arrowValue
				}, 500, function() {
					var box = '<div id="scrollBox' + scrollTarget + '">' + $('#scrollBox' + scrollTarget).html() + '</div>';
					
					$('#scrollBox' + scrollTarget).remove();
					$('.content' + scrollTarget).append(box);
					$('#scrollpane' + scrollTarget).css({
						'top': '0px'
					});
					$('#back' + scrollTarget).hide();
					
					$('.' + content).slideDown(500, function() {
						initScroller(scrollTarget);
					});
				});
				
				
				
			}

		}
	});
});

function initScroller(targetId)
{
	$('#scrollBox' + targetId).scroller({
		direction:'vertical',
		backButtonId :'back' + targetId,
		nextButtonId :'next' + targetId,
		scrollId:'scrollpane' + targetId 
	}); 
}