var UI = {

	PRELOAD: false,
	BUSY_INDICATOR_DELAY: 500,
	TAB_OPEN_MARGIN_X: 8,
	TAB_MINIMIZED_OFFSET: 25,
	TAB_FX_DURATION: 500,
	BG_FX_DURATION: 350,
	BG_FX_SIMPLE: false,
	NAVI_DROPDOWN_DURATION: 300, 
	NAVI_DROPDOWN_DELAY: 100,
	
	URL_CONTENTS: '/cache/contents.html',
	URL_BG_IMG: '/img/backgrounds/',
	
	ready: false,
	ready_cb: null,
	is_busy: false

};

UI.load = function() {
	var that = this;

	// Load tabs
	$('#tabs').load(UI.URL_CONTENTS, null, function() {

		tab_contents_ready();  // bindings etc.
		var path = UI.get_path_from_url(window.location.href);
		var current_tab = UI.get_tab_for_path(path);
		UI.path = path;
		
		// Parse background image urls from tab ids & from color preview links
		var sources = []; // OBSOLETE

		$('#tabs .tab').each(function() {
			var basename;
			var m = [];
			if ($(this).hasClass('random-bg')) {
				basename = UI.random_tab_basename();
			} else if (m = this.className.match(/random\-bg\-([0-9]+)/)) {
				var max = m[1];
				var random = Math.round(Math.random() * max);
				basename = UI.tab_basename($(this)) + (random == 0 ? '' : ('_' + random));
			} else {
				basename = UI.tab_basename($(this));
			}
			var prefix = UI.URL_BG_IMG + basename;
			var src_sharp = prefix + '.jpg';
			var src_blur = prefix + '_blur.jpg';

			$(this).attr('bg_sharp', src_sharp);
			$(this).attr('bg_blur', src_blur);

			if ($(this).attr('id') == current_tab.attr('id')) {
				// Images for current tab will be loaded first
				sources.unshift(src_sharp); // OBSOLETE
				sources.unshift(src_blur); // OBSOLETE
			} else {
				sources.push(src_sharp); // OBSOLETE
				sources.push(src_blur); // OBSOLETE
			}

			$(this).find('.product-data .color-preview A[href$=.jpg]').each(function() {
				sources.push($(this).attr('href')); // OBSOLETE
			});
		});
		
		var total = sources.length; // OBSOLETE

		// Load images one by one and update status indicator
		var ready = function() { // OBSOLETE
			/* var percent = Math.round((total - sources.length) / total * 100);
			$('#loading .percent').text(percent + '%'); */
			if (sources.length == 0) {
				UI.ready = true;
				if (UI.ready_cb) {
					window.setTimeout(UI.ready_cb, 0);
				}
			} else {
				if (sources.length == total - 2)
					UI.show();
				// Timeout required to prevent stack overflow in IE
				window.setTimeout(function() { load_image(); }, 10);
			}
		}

		var load_image = function() { // OBSOLETE
			if (sources.length > 0) {
				var src = sources.shift();
				$(document.createElement('img'))
					.load(ready)
					.error(ready)
					.attr('src', src)
					.addClass('bg')
					.prependTo($('#gfx'));
			}
		}
		
		if (UI.PRELOAD) {
			load_image(); // OBSOLETE
		} else {
			UI.load_bg_for_tab(current_tab, function() {
				UI.ready = true;
				UI.show();
			});
		}
		
	});
}

UI.show = function() {
		var that = this;
		UI.unbusy();
		$('#document').css('visiblity', 'hide').show();
		that.init_tabs();
		that.init_bg(window.location.href);
		$('#document').hide().css('visiblity', 'visible')
		$('#document').fadeIn(500, function() {
			that.navigate(window.location.href);
			that.poll_location();
			window.setInterval(function() { UI.tab_bounce(); }, 3000);
		});
}

UI.init_bg = function(url) {
	var path = this.get_path_from_url(url);
	var tab = this.get_tab_for_path(path);
	var bg = $('#gfx [src$=' + tab.attr('bg_sharp') + ']');
	bg.appendTo(bg.parent());
}

UI.init_tabs = function() {
	$('#tabs .tab').each(function() {
		var tab = $(this);
		var margin_name = $(this).hasClass('tab-left') ? 'marginLeft' : 'marginRight';
		var margin_x = $(this).outerWidth() * -1;
		$(this).css(margin_name, margin_x)
			.attr('margin-closed', margin_x)
			.addClass('tab-closed')
			.hide()
			.find('.handle').click(function() {
				if (tab.hasClass('tab-minimized'))
					UI.tab_open(tab);
				else
					UI.tab_minimize(tab);
			});
	});
}

UI.poll_location = function() {
	return false; // still too buggy
	var that = this;
	window.setInterval(function() {
		var url = window.location.href;
		var anchor_path = that.get_anchor_path(url)
		if (anchor_path !== false) {
			path = anchor_path;
		} else {
			path = that.get_path_from_url(url);
		}
		if (path != that.path) {
			that.navigate('/' + path);
		}
	}, 1000);
}

UI.navigate = function(url) {

	if (UI.bg_being_switched || UI.tab_being_opened
		|| UI.tab_being_minimized || UI.tab_being_opened)
		return false;

	var path = this.get_path_from_url(url);
	var tab_new = this.get_tab_for_path(path);

	if (! tab_new.hasClass('bg_ready')) {
		UI.load_bg_for_tab(tab_new, function() {
			UI.unbusy();
			UI.change_page(url);
		});
	} else {
		UI.change_page(url);
	}
}

UI.change_page = function(url) {

	var path = this.get_path_from_url(url);
	var tab_cur = this.get_tab_for_path(UI.path);
	var tab_new = this.get_tab_for_path(path);
	UI.path = path;

	$('#nav-main A.current').removeClass('current');
	$('#nav-main A[href="/' + path + '"]').addClass('current');
	document.title = $('.bottom', tab_new).text() + ' – Tivoli Audio';
	if (window.pageTracker) {
		pageTracker._trackPageview('/' + UI.path);
	}

	if (tab_new.length > 0) {
		this.update_anchor(path);
		this.tab_switch(tab_new, tab_cur);
	} else alert('Sorry, no tab exists with id \'' + this.get_id_for_path(path) +'\'');

	$.get(url);  // Dummy GET request to keep access.log up to date with real URLS
}



UI.load_bg_for_tab = function(tab, callback) {
	if (! tab.hasClass('bg_ready')) {
		UI.busy();
		$(document.createElement('img'))
			.attr('src', tab.attr('bg_sharp'))
			.addClass('bg')
			.prependTo($('#gfx'))
			.ready(function() {
				$(document.createElement('img'))
					.attr('src', tab.attr('bg_blur'))
					.addClass('bg')
					.prependTo($('#gfx'))
					.ready(callback);
		});
		tab.addClass('bg_ready');
	} else {
		window.setTimeout(callback, 0);
	}
}

UI.update_anchor = function(new_anchor) {
	var url = window.location.href;
	var real_path = this.get_path_from_url(url);
	var current_anchor = url.indexOf('#') > -1 ? url.substr(url.indexOf('#') + 1) : '';
	if (real_path != new_anchor || current_anchor != '') {
		if (url.indexOf('#') == -1) {
			window.location.href += '#' + new_anchor;
		} else {
			window.location.href = url.replace(/#.*/, '#' + new_anchor);
		}
	}
}

UI.tab_switch = function(tab_new, tab_cur) {
	//var tab_open = $('#tabs .tab-open, #tabs .tab-minimized');
	if (tab_cur.length > 0) {
		if (tab_new.attr('id') == tab_cur.attr('id')) {
			UI.tab_open(tab_new);
		} else {
			UI.switch_bg(tab_new, tab_cur);
			UI.tab_close(tab_cur, function() {
				UI.tab_open(tab_new);
			});
		}
	} else {
		this.tab_open(tab_new);
	}
}

UI.switch_bg = function(tab_new, tab_cur) {

	var curr_sharp = $('#gfx [src$=' + tab_cur.attr('bg_sharp') + ']');
	var curr_blur = $('#gfx [src$=' + tab_cur.attr('bg_blur') + ']');
	var next_sharp = $('#gfx [src$=' + tab_new.attr('bg_sharp') + ']');
	var next_blur = $('#gfx [src$=' + tab_new.attr('bg_blur') + ']');
	var last_visible = curr_sharp.length > 0 ? curr_sharp : $('#gfx .bg:last');

	UI.bg_being_switched = true;
	
	if (UI.BG_FX_SIMPLE) {
		curr_blur.hide();
		next_blur.hide();	
		next_sharp.insertBefore(curr_sharp);
		curr_sharp.fadeOut(UI.BG_FX_DURATION * 2, function() {
			next_sharp.appendTo(next_sharp.parent());
			$('#gfx .bg').show();
			UI.bg_being_switched = false;
		});
	} else {
		curr_blur.insertBefore(last_visible);
		next_blur.insertBefore(curr_blur);
		next_sharp.insertBefore(next_blur);
		last_visible.fadeOut(UI.BG_FX_DURATION, function() {
			$(this).prev().fadeOut(UI.BG_FX_DURATION, function() {
				$(this).prev().fadeOut(UI.BG_FX_DURATION, function() {
					next_sharp.appendTo(next_sharp.parent());
					$('#gfx .bg').show();
					UI.bg_being_switched = false;
				});
			});
		});
	}
}

UI.tab_open = function(tab) {
	var open_minimized = tab.hasClass('minimized') && ! tab.hasClass('tab-minimized');
	if (! tab.hasClass('tab-open')) {
		if (! tab.hasClass('tab-hidden')) {
			tab.show();
			var anim_props = {};
			var new_margin = open_minimized ? (parseInt(tab.attr('margin-closed')) + UI.TAB_MINIMIZED_OFFSET) : UI.TAB_OPEN_MARGIN_X;
			anim_props[tab.hasClass('tab-left')
				? 'marginLeft' : 'marginRight'] = new_margin;
			UI.tab_being_opened = true;
			tab.animate(anim_props, {
					duration: this.TAB_FX_DURATION,
					complete: function() {
						UI.tab_being_opened = false;
					}
			});
		}
	}
	tab.removeClass('tab-closed');
	tab[open_minimized ? 'addClass' : 'removeClass']('tab-minimized');
	tab[open_minimized ? 'removeClass' : 'addClass']('tab-open');
}

UI.tab_close = function(tab, callback) {
	if (! tab.hasClass('tab-closed')) {
		if (! tab.hasClass('tab-hidden')) {
			var anim_props = {};
			anim_props[tab.hasClass('tab-left')
				? 'marginLeft' : 'marginRight'] = tab.attr('margin-closed');
			UI.tab_being_closed = true;
			tab.animate(anim_props, {
					duration: UI.TAB_FX_DURATION,
					complete: function() {
						$(this).hide();
						UI.tab_being_closed = false;
						if (callback)
							window.setTimeout(callback, 0);
					}
				});
		} else {
			if (callback)
				window.setTimeout(callback, 0);
		}
		tab.removeClass('tab-open')
			.removeClass('tab-minimized')
			.addClass('tab-closed');
	}	
}

UI.tab_minimize = function(tab) {
	if (! tab.hasClass('tab-minimized')) {
		if (! tab.hasClass('tab-hidden')) {
			var margin = parseInt(tab.attr('margin-closed')) + UI.TAB_MINIMIZED_OFFSET;
			var anim_props = {};
			anim_props[tab.hasClass('tab-left')
				? 'marginLeft' : 'marginRight'] = margin;
			UI.tab_being_minimized = true;
			tab.animate(anim_props, {
					duration: this.TAB_FX_DURATION,
					complete: function() {
						UI.tab_being_minimized = false;
					}
				});
		}
		tab.removeClass('tab-open')
			.removeClass('tab-closed')
			.addClass('tab-minimized');
	}

}

UI.tab_bounce = function() {
	var tab = $('.tab-minimized.minimized');
	var margin = parseInt(tab.attr('margin-closed')) + UI.TAB_MINIMIZED_OFFSET;
	var anim_1 = {};
	var anim_2 = {};
	var margin_name = tab.hasClass('tab-left') ? 'marginLeft' : 'marginRight';
	anim_1[margin_name] = margin + 40;
	anim_2[margin_name] = margin;
	tab.animate(anim_1, {
		duration: 300
	}).animate(anim_2, {
		easing: 'easeOutBounce',
		duration: 750
	} );
}

UI.tab_basename = function(tab) {
	var re = new RegExp(/^tab\-([a-z0-9_\-]+__)?(.+)/);
	var m = tab.attr('id').match(re);
	if (m && m[2]) {
		return m[2].replace(/-/g, '_');
	}
}

UI.random_tab_basename = function() {
	var tab_list = $('#tabs .tab').not('.not-random-bg-source').get();
	var random = Math.round(Math.random() * (tab_list.length - 1));
	return this.tab_basename($(tab_list[random]));
}

UI.get_path_from_url = function(url) {
	var m = url.match(/^http:\/\/[^\/]+([^(#|?)]*)/);
	if (m && m.length > 1) {
		return m[1].substr(1);  // absolute url
	} else {
		return url.substr(1);  // relative url
	}
}

UI.get_id_for_path = function(path) {
	if (path == '' || ! path)
		path = 'index';
	return 'tab-' + path.replace(/\//g, '__');
}

UI.get_tab_for_path = function(path) {
	return $('#' + this.get_id_for_path(path));
}

UI.process_url = function() {
	var url = window.location.href;
	var anchor_path = this.get_anchor_path(url);
	if (anchor_path !== false) {
		// Redirect to anchor path to keep the url nice
		var path = this.get_path_from_url(url);
		var host = url.substr(0, url.indexOf(path));
		window.location.href = host + anchor_path;
	}
}

UI.get_anchor_path = function(url) {
	var m = url.match(/#(.*)$/);
	if (m && m.length > 1) {
		var anchor_path = m[1];
		if (this.is_navi_link('/' + anchor_path)) {
			return anchor_path;
		}
	}
	return false;
}

UI.is_valid_link = function(url) {
	var url = String(url);
	if (url.indexOf('http://') == 0
		|| new RegExp(/\.[^.]+$/).test(url)) return false;
	return UI.get_tab_for_path(UI.get_path_from_url(url)).length > 0;
}

UI.is_navi_link = function(url) {
	return $('#nav-main A[href="' + url + '"]').length > 0;
}

UI.busy = function() {
	UI.is_busy = true;
	window.setTimeout(function() {
		if (UI.is_busy)
			$('#loading')[$.browser.msie ? 'show' : 'fadeIn']();
	}, UI.BUSY_INDICATOR_DELAY);
}

UI.unbusy = function() {
	if (UI.is_busy) {
		UI.is_busy = false;
		$('#loading')[$.browser.msie ? 'hide' : 'fadeOut']();
	}
}

$(function() {
	
	UI.process_url();
	
	// Center the 'loading' animation
	var loading = $('#loading');
	loading.css('top', $(window).height() / 2 - loading.height() / 2)
		.css('left', $(window).width() / 2 - loading.width() / 2)
		.hide();

	// Center the content vertically
	$('#document').each(function() {
		var margin = $(window).height() - $(this).height();
		if (margin > 0)
			$(this).css('marginTop',  margin / 2);
	});

	/*Cufon.replace('#nav-main A', {
		fontFamily: 'Frutiger LT Std',
		fontWeight: 400,
		hover: true
	});*/
	
	// Bind internal links
	$('#tabs .scrollable A, #nav-main A, H1 A').live('click', function(e) {
		var href = $(this).attr('href');
		if (UI.is_valid_link(href)) {
			e.preventDefault();
			if (UI.PRELOAD) {
				// Background graphics have been / are being preloaded
				if (UI.ready) {
					UI.navigate(href);
				} else {
					UI.busy();
					UI.ready_cb = function() {
						UI.navigate(href);
						UI.unbusy();
					}
				}
			} else {
				UI.navigate(href);
			}
		}
	});
	
	/* Open external links in the new window */
	$('A[href^="http://"]').live('click', function() {
		$(this).attr('target', '_blank');
	});
	
	/* Bind main navigation dropdown handler */
	$('#nav-main UL').each(function() {
		$(this.parentNode).hover(function() {
			var that = this;
			$(this).addClass('busy');
			window.setTimeout(function() {
				if ($(that).hasClass('busy')) {
					$('LI', that).slideDown(UI.NAVI_DROPDOWN_DURATION, function() {
						$(that).removeClass('busy');
					});
				}
			}, UI.NAVI_DROPDOWN_DELAY);
		}, function() {
			if (! $(this).hasClass('busy'))
				$('LI', this).slideUp(UI.NAVI_DROPDOWN_DURATION);
			$(this).removeClass('busy');
		});
	});
	
	$('.enable-config').dblclick(function() {
		UI.navigate('/config');
	});
	
	UI.load();
		
});


/* This is called after the tabs are loaded */
function tab_contents_ready() {
	
	/* Reseller form is a pseudo-form */
	$('#reseller-filter').submit(function() { return false; });

	var re_dehilite = new RegExp('<span class="highlighted">([^<]*)</span>', 'gi');
	
	var hilite = function(elem, str) {
		var re_hilite = new RegExp('(' + str + ')', 'gi');
		var replacement = '<span class="highlighted">$1</span>';
		var replaced = $(elem).html().replace(re_hilite, replacement);
		$(elem).html(replaced);
	}

	var dehilite = function(elem) {
		var replaced = $(elem).html().replace(re_dehilite, '$1');
		$(elem).html(replaced);
	}
	
	if ($.browser.msie) {
		// Highliting too slow in IE
		hilite = function() {}
		dehilite = function() {}
	}

	/* Filter resellers by keyword */
	$('#reseller-filter [name=filter]').keyup(function(e) {
	
		if (e.keyCode == 27) {
			$(this).val('').keyup().blur();
			return false;
		}

		var str = $(this).val().toLowerCase();
		
		if (str.length > 3) {
			$('#resellers LI').each(function() {
				if ($(this).text().toLowerCase().indexOf(str) == -1) {
					$(this).hide();
				} else {
					dehilite($('H3', this));
					hilite($('H3', this), str);
					$(this).show();
				}
			});
			$('#resellers UL').each(function() {
				var h2 = $(this).prev('H2');
				if ($('LI:visible', this).length == 0) {
					h2.hide();
					dehilite(h2);
				} else {
					hilite(h2, str);
					h2.show();
				}
			});
		} else {
			$('#resellers LI, #resellers H2').each(function() {
				$(this).show();
				dehilite(this);
			});
		}
	}).focus(function() {
		if ($(this).hasClass('default-value')) {
			$(this).attr('original_value', $(this).val());
			$(this).val('').removeClass('default-value');
		}
	}).blur(function() {
		if ($(this).val() == '') {
			$(this).val($(this)
				.attr('original_value'))
				.addClass('default-value');
		}
	});
	
	/* Bind Google Map handler */
	$('#tabs .address').live('click', function() {
		var url = 'http://maps.google.com/maps?f=d&q=' + encodeURIComponent($(this).text());
		window.open(url);
	}).live('mouseover', function() { $(this).attr('title', 'Google Maps') });
		
	/* Keep element's height even when content is dynamically modified, e.g. resellers */
	/*$('#tabs .keep-height').each(function() {
		var h = $(this).height();
		$(this).height(h);
	});*/
	
	/* Open manuals in new window */
	$('A[href$=".pdf"]').click(function() {
		$(this).attr('target', '_blank');
	});
	
	/* Bind product color previews */
	$('.product-data .color-preview A').each(function() {
		var href = $(this).attr('href');
		if (href.indexOf('#') != -1 && href.indexOf('#default') == -1) {
			var prefix = UI.URL_BG_IMG;
			if (href.indexOf('#auto') != -1) {
				var basename = UI.tab_basename($(this).parents('.tab:first'));
				var autocolor = $(this).text().toLowerCase().replace(/[^a-z0-9\-]/g, '-');
				var color = basename + '_' + autocolor;
			} else {
				var color = href.substr(href.indexOf('#') + 1);
			}
			var src = prefix + color + '.jpg';
			$(this).attr('href', src)
				.mouseover(function() {
					// Show color preview background
					UI.busy();
					var bg = $(document.createElement('img'))
						.attr('src', $(this).attr('href'))
						.addClass('color-preview bg')
						.appendTo('#gfx')
						.ready(function() { UI.unbusy() });
				}).mouseout(function() {
					// Restore previous background
					var bg = $('#gfx .bg:last');
					if (bg.hasClass('color-preview')) {
						bg.prependTo(bg.parent());
					}
				});
		}
	}).click(function(e) { e.preventDefault(); });
	
	// Bind feedback form
	$('#feedback-form').submit(function() {
		var form = this;
		var params = {};
		$(':input', this).each(function() {
			params[$(this).attr('name')] = $(this).val();
		});
		if (params['message'] == '') {
			alert('Ole hyvä ja täytä viestikenttä.');
			$('[name=message]', this).focus();
			return false;
		}
		params['checksum'] = params['message'].length;
		$.post($(this).attr('action'), params, function(response, status) {
			$(form).hide();
			if (response.indexOf('OK') != -1) {
				$('#response-msg .error').hide();
				$('#response-msg .ok').show();
			} else {
				$('#response-msg .ok').hide();
				$('#response-msg .error').show();
			}
		});
		return false;
	});
	
	$('A[href^="mailto:"]').each(function() {
		var reversed = $(this).attr('href').substr(7);
		var email = reversed.split('').reverse().join('').substr(8);
		$(this).attr('href', 'mailto:' + email).text(email).css('visibility', 'visible');
	});
	
	if (! ($.browser.msie && $.browser.version < 9)) {
		Cufon.replace('.tab H1', { fontFamily: 'Frutiger LT Std', fontWeight: 300 });	
	} else if ($.browser.version < 7) {
		$('.tab .handle').each(function() {
			$(this).prependTo(this.parentNode);
		});
	}
	
}