(function($) {
	$(function() {
		
		var guide = $('#guide');
		var openedDetails = function() {
			return !!$('#guide .detail:visible').size();
		}
		
		var menu = $('#menu');
		
		$('#menu .item:has(#player)').parent().css({ position: 'relative' });
		setTimeout(function() { 
			menu.find('.item:not(#player)').hide();
			menu.find('.item:has(#player)').css({ left: '-10000px' });
		}, 50);
		
		
		$('#menu > ul > li > a').click(function() {
				$('#menu .item:visible:not(#player)').slideUp();
				$('#menu .item:has(#player)').css({ left: '-10000px' });
                
				var item = $(this).parent().find('.item');
				if (item.is(':hidden')) {
					item.slideDown();
				}
				if (item.find('#player').size()) {
                    if (item.css('left') == '-10000px') {
						item.css({ left: 0 });
					} else {
						item.css({ left: '-10000px' });
					}
				}
				return false
			}
		);

		guide.click(function() {
			menu.find('.item:not(#player)').hide();
			menu.find('.item:has(#player)').css({ left: '-10000px' });
		});
		
		// list
		menu.find('#list h3 a').click(function() {
			$(this).parent().parent().parent().find('ul').hide();
			$(this).parent().parent().find('ul').show();
			return false;
		});

		// ajax loading view
		var ajax_load = function() {
            
            
            $(this).blur();
			$('.image').block();
			
            $('#menu .item:visible:not(#player)').slideUp();
            $('#menu .item:has(#player)').css({ left: '-10000px' });
            
            !$.browser.msie && $('.link .icon', guide).fadeOut(200);

			// show loading indicator
			$('<img id="loading" src="/images/loading.gif" alt="loading"/>').css({
				border: '1px solid #666',
				position: 'absolute',
				right: '4px',
				top: '4px' 
			}).hide().prependTo(guide.find('.image')).fadeIn(500);
			
			// background image fade into another
			
			// hide cursor
			$('#cursor').hide();
			
			$.get($(this).attr('href'), function(data) {
				
				var fade = function() {
					var img = guide.find('.view:nth-child(2) .image > img');
					if (!img.size() || !img.get(0).complete) {
						setTimeout(fade, 50)
					} else {
						var old = $('.view:nth-child(1)');
						old.find('.image').fadeOut(500, function() {
							$(this).parent().remove();
							init();
						});
						old.find('.text').fadeOut(500);
						
					}
				} 
				
				guide.append(data);
				
				var old = $('.view:nth-child(1)');
				old.find('.link').remove();
				old.find('.info').remove();
				
				fade();
						
			});
			
			return false;
		};

		
		// menu links loading via ajax
		menu.find('area').add('#list .location > ul > li > a').click(ajax_load);
		

		var init = function() {
			
			$.ifixpng('/images/transparent.gif');
			$('img[@src$=.png]').ifixpng(); 
			
			var close = $('<div class="close"></div>');
			
			var image = $('#guide .view .image');
			var view = $('#guide .view');
			var status = $('#guide .view .info .status');
			var info = $('#guide .view .info');
			
			// show info panel
			info.fadeIn(200);
			
			// remove view image alt attribute
			image.find('img').removeAttr('alt');
			
			// ui block
			var block = $('<div id="block"></div>').prependTo(image).css({
				position: 'absolute',
				width: image.width()+'px',
				height: image.height()+'px',
				opacity: 0,
				zIndex: 15,
				display: 'none'
			});
		
			// hide all details, close detail onclick
			$('.detail', guide).append(close).hide().click(function() {
				$(this).fadeOut(500);
				block.hide();
			});
			
						
			// open detail
			$('.link[rel=detail]', guide).click(function() {
				if (!openedDetails()) {
					var id = $(this).attr('href').replace(/.*\/id\/(.*)/, '$1');
					$('#guide #detail-'+id).fadeIn(500);
					$(this).blur();
					block.show();
				}
				return false;
			});
			
			
			// remove title
			$('.link', guide)
				.each(function() {
					$(this).attr('tooltip', $(this).attr('title'));
					$(this).removeAttr('title');
				});
				
			
			
			// status bar
			status.html('');
			$('.image .link', guide)
				.mouseover(function() {
					var img = '';
					if ($(this).find('img').size()) {
						var src = $(this).find('img').attr('src');
                        if (src.indexOf('foot') != -1) {
                            src = '/images/help_foot.gif';
                        }
                        img = '<img src="'+src+'" alt="">';
					}
					status.html(img + $(this).attr('tooltip')).addClass('icon-'+$(this).attr('rel'));
				})
				.mouseout(function() {
					status.html('').removeClass('icon-'+$(this).attr('rel'));
				});
			
			
			
			// link icon cursor
			var link_mousemove = function(evt) {
				var left = evt.pageX + 10;
				var top = evt.pageY + 10;
				$('#cursor').css({
					left: left+'px',
					top: top+'px'
				});
			}
			
			if (!$.browser.msie) {
				$('.link .icon', guide).css({ opacity: .7 });
				// link highlight
				$('.image .link').hover(
					function() { $(this).find('.icon').css({ opacity: 1 }) },
					function() { $(this).find('.icon').css({ opacity: .7 }) }
				)
			}
			
			// cursor + tooltip
			$('.image .link', guide)
				.mouseover(function() {
					var cursor = $('#cursor');
					if (!$('#cursor').size()) {
						cursor = $('<div id="cursor"></div>').appendTo(document.body);
					}
					cursor.html($(this).attr('tooltip')).addClass('cursor-'+$(this).attr('rel')).show();
					$(this).bind('mousemove', link_mousemove);
				})
				.mouseout(function() {
					$('#cursor').removeClass('cursor-'+$(this).attr('rel')).hide();
					$(this).unbind('mousemove', link_mousemove);
				});
			
			/*
			// link helper image
			$('.view .image .link')
				.each(function() {
					var helper = $('<div class="helper"></div>').appendTo($(this).parent());
					console.log($(this));
					helper
						.css({
							left: $(this).css('left'),
							top: $(this).css('top'),
							opacity: 0.4
						})
						.addClass('helper-'+$(this).attr('rel'))
					$(this).hover(
						function() { helper.animate({ opacity: 1}, 200, 'swing'); },
						function() { helper.animate({ opacity: 0.4}, 200, 'swing'); }
					);	
				})
			*/
				
			
			
			// ajax
			$('.link[rel!=detail]', guide).click(ajax_load);
			
			// scroll text
			guide.find('.view .text').wrapInner('<div id="text-wrap"></div>');
			var textWrap = $('#text-wrap').css('position', 'relative');
			$('<div id="scroll_down"></div>').prependTo(view)
				.mouseover(function() {
					this.scrollInterval = setInterval(function() {
						var top = parseInt(textWrap.css('top'));
						if (isNaN(top)) top = 0;
						if (textWrap.parent().height() - top < textWrap.height() + 20) {
							textWrap.css('top', (top - 4)+'px');
						}
					}, 5);
				})
				.mouseout(function() {
					clearInterval(this.scrollInterval);
				});
			
			$('<div id="scroll_up"></div>').prependTo(view)
				.mouseover(function() {
					this.scrollInterval = setInterval(function() {
						var top = parseInt(textWrap.css('top'));
						if (isNaN(top)) top = 0;
						if (top < 0) {
							textWrap.css('top', (top + 4)+'px');
						}
					}, 5);
				})
				.mouseout(function() {
					clearInterval(this.scrollInterval);
				});
			
			
			view.css({ zIndex: 5 });
            
            setTimeout(function() { $('.image').unblock() }, 300);
		
		}
		
		init();
				
	});
})(jQuery)