var UI = {

	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_BG_IMG: '/img/backgrounds/',
	
	ready: false,
	ready_cb: null,
	is_busy: false

};

UI.load = function() {
	var path = UI.get_path_from_url(window.location.href);
	//UI.path = path;
	var current_tab = UI.get_tab_for_path(path);
	//UI.init_tab(current_tab);
	UI.load_bg_for_tab(current_tab, function() {
		UI.ready = true;
		UI.show();
	});
}

UI.show = function() {
		UI.unbusy();
		$('#tabs .tab').hide();
		$('#document').css('visiblity', 'hide').show();
		$('#document').hide().css('visiblity', 'visible')
		$('#document').fadeIn(500, function() {
			UI.navigate(window.location.href);
			window.setInterval(function() { UI.tab_bounce(); }, 3000);
		});
}

UI.navigate = function(url) {

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

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

	var prepare_tab = function(tab_new) {
		UI.init_tab(tab_new);
		var sitetitle = tab_new.attr('sitetitle');
		if (sitetitle) document.title = sitetitle;
		if (window.pageTracker) {
			pageTracker._trackPageview('/' + UI.path);
		}
		UI.load_bg_for_tab(tab_new, function() {
			UI.unbusy();
			UI.tab_switch(tab_new, tab_cur);
		});
	}

	UI.path = path;
	UI.update_anchor(path);

	$('#nav-main A.current').removeClass('current');
	$('#nav-main A[href="/' + path + '"]').addClass('current');
		
	if (tab_new.length == 0) {
		var params = '?' + new Date().getTime(); // prevent IE caching XHR GET requests
		$('<div />').load(url + params + ' #tabs', null, function(text, status) {
			$('#tabs').append($('#tabs .tab', this));
			var sitetitle = $.trim($('#tabs .sitetitle', this).text());
			tab_new = $('#tabs .tab:last').attr('sitetitle', sitetitle);
			prepare_tab(tab_new);
		});
	} else {
		prepare_tab(tab_new);
	}
}

UI.init_tab = function(tab) {
	//var bg = $('#gfx [src$=' + tab.attr('bg_sharp') + ']');
	//var bg = tab.get(0).bg_sharp;
	//bg.appendTo(bg.parent());
	var margin_name = $(tab).hasClass('tab-left') ? 'marginLeft' : 'marginRight';
	var margin_x = $(tab).outerWidth() * -1;
	$(tab).hide();
	if (! tab.hasClass('initialized')) {
		$(tab).css(margin_name, margin_x)
			.attr('margin-closed', margin_x)
			.addClass('tab-closed')
			.find('.handle').click(function() {
				if (tab.hasClass('tab-minimized'))
					UI.tab_open(tab);
				else
					UI.tab_minimize(tab);
			});
		UI.tab_ready(tab);
		tab.addClass('initialized');
	}
}

UI.get_tab_bg_src = function(tab) {
	var basename;
	var m = [];
	if (tab.hasClass('random-bg')) {
		basename = UI.random_tab_basename();
	} else if (m = tab.get(0).className.match(/random\-bg\-([0-9]+)/)) {
		var max = m[1];
		var random = Math.round(Math.random() * max);
		basename = UI.tab_basename(tab) + (random == 0 ? '' : ('_' + random));
	} else {
		basename = UI.tab_basename(tab);
	}
	var prefix = UI.URL_BG_IMG + basename;
	/*tab.attr('bg_sharp', prefix + '.jpg');
	tab.attr('bg_blur', prefix + '_blur.jpg');*/
	return [prefix + '.jpg', prefix + '_blur.jpg'];
}

UI.load_bg_for_tab = function(tab, callback) {
	/*var bg_sharp = tab.attr('bg_sharp');
	var bg_blur = tab.attr('bg_blur');*/
	if (! tab.hasClass('bg_ready')) {
		tab.addClass('bg_ready');
		//UI.set_tab_bg(tab);
		UI.busy();
		var bg_src = UI.get_tab_bg_src(tab);
		var bg_sharp = $(document.createElement('img'));
		var bg_blur = $(document.createElement('img'));
		tab.get(0).bg_sharp = bg_sharp;
		tab.get(0).bg_blur = bg_blur;
		bg_sharp.attr('src', bg_src[0])
			.addClass('bg')
			.prependTo($('#gfx'))
			.ready(function() {
					bg_blur.attr('src', bg_src[1])
						.addClass('bg')
						.prependTo($('#gfx'))
						.ready(callback);
			});
	} 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) {
	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');*/

	var curr_sharp = tab_cur.get(0).bg_sharp;
	var curr_blur = tab_cur.get(0).bg_blur;
	var next_sharp = tab_new.get(0).bg_sharp;
	var next_blur = tab_new.get(0).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.safeInsertBefore(last_visible);
		next_blur.safeInsertBefore(curr_blur);
		next_sharp.safeInsertBefore(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() {
	if (UI.tab_being_opened || UI.tab_being_minimized || UI.tab_being_closed) return;
	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 = '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_internal_link = function(url) {
	var url = String(url);
	return url.charAt(0) == '/' && ! new RegExp(/\.[^.]+$/).test(url);
}

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);
	});

	// Popup functionality
	$('A.popup').live('click', function(e) {
		e.preventDefault();
		e.stopPropagation();
		$('#popup-shadow')
			.height($(document).height())
			.width($('body').width())
			.removeClass('hidden');
		$('#popup-box')
			.css('top', ($(document).height() - $('#popup-box').outerHeight()) / 2)
			.css('left', ($(document).width() - $('#popup-box').width()) / 2)
			.removeClass('hidden');
		$('#popup-box #popup-inner').load($(this).attr('href'), function() {
			$('#popup-shadow').height($(document).height());  // re-adjust height
			$('.toggle-hideable', this).click(function() {
				$('#popup-box .hideable').toggle();
			});
		});
	});
	
	var close_popup = $('#popup-close').click(function() {
			$('#popup-shadow').addClass('hidden');
			$('#popup-box').addClass('hidden');	
			$('#popup-box #popup-inner').empty();
	});
	
	$(document).keyup(function(e) {
		if (e.keyCode == 27) {
			close_popup.click();
		}
	});
	
	// Bind internal links
	$('#tabs .scrollable A, #nav-main A, H1 A').live('click', function(e) {
		if ($(this).hasClass('popup')) return false;
		var href = $(this).attr('href');
		if (UI.is_internal_link(href)) {
			e.preventDefault();
			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 */
	var navi_slideup = function() {
		if (! $(this).hasClass('busy'))
			$('LI', this).slideUp(UI.NAVI_DROPDOWN_DURATION);
		$(this).removeClass('busy');
	}
	var navi_slidedown = function() {
		var that = this;
		$('#nav-main UL').not($('UL', this)).mouseout();
		$(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);	
	}
	$('#nav-main UL').each(function() {
		$(this.parentNode).hover(navi_slidedown, navi_slideup);
	});

	$('FORM.bid .submit').live('click', function(e) {
		e.preventDefault();
		var form = $('FORM.bid');
		var valid = true;
		$('.required', form).each(function() {
			if ($(this).val() == '') {
				alert('Ole hyvä ja täytä tähdellä merkityt kentät.');
				$(this).focus();
				valid = false;
				return false;
			}
		});
		var sum = $('INPUT.sum', form).val();
		var m = sum.match(/^[0-9]+$/);
		if (! m || sum < 1) {
			alert('Ole hyvä ja syötä tarjoukseksi kokonaislukuna.');
			$('INPUT.sum', form).focus();
			valid = false;
			return false;
		}
		var winner = parseInt($.trim($('.current-bids .sum').text()));
		var min_bid = winner ? winner + 50 : 100;
		if (sum < min_bid) {
			alert('Lähtöhinta on 100 euroa, minimikorotus 50 euroa. Tarjouksesi on oltava vähintään ' + min_bid + ' euroa.');
			$('INPUT.sum', form).focus();
			valid = false;
			return false;
		}
		if (valid) {
			$(this).val('Hetkinen...');
			$.post(form.attr('action'), form.serialize(), function(text, status) {
				if (text.indexOf('SAVED OK') != -1) {
					form.addClass('hidden');
					$('.bid-submitted').removeClass('hidden');
				} else {
					alert('Virhe! Tarkista syöttämäsi tiedot ja yritä uudelleen.');
				}
			});
		}
	});
		
	UI.load();
		
});


/* This is called after the tab is loaded and inserted into dom. */
UI.tab_ready = function(tab) {

	if (tab.attr('id') == 'tab-jalleenmyyjat') {
	
		/* Reseller form is a pseudo-form */
		$('#reseller-filter', tab).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]', tab).keyup(function(e) {
		
			if (e.keyCode == 27) {
				$(this).val('').keyup().blur();
				return false;
			}
	
			var str = $(this).val().toLowerCase();
			
			if (str.length > 3) {
				$('#resellers LI', tab).each(function() {
					if ($(this).text().toLowerCase().indexOf(str) == -1) {
						$(this).hide();
					} else {
						dehilite($('H3', this));
						hilite($('H3', this), str);
						$(this).show();
					}
				});
				$('#resellers UL', tab).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', tab).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 */
	$('.address', tab).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"]', tab).click(function() {
		$(this).attr('target', '_blank');
	});
	
	/* Bind product color previews */
	$('.product-data .color-preview A', tab).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', tab).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:"]', tab).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) {
		Cufon.replace('.tab H1', { fontFamily: 'Frutiger LT Std', fontWeight: 300 });	
	} else if ($.browser.version < 7) {
		$('.tab .handle').each(function() {
			$(this).prependTo(this.parentNode);
		});
	}
	
	$('.autoload', tab).each(function() {
		$(this).parent().load($(this).attr('href'));
	});
	
/*	$('#popup-box .toggle-hideable').live('click', function() {
		$('#popup-box .hideable').toggle();
	});*/

}

jQuery.fn.extend({
	safeInsertBefore: function(elem) {
		if (this.get(0) != $(elem).get(0))
			this.insertBefore(elem);
	}
});