$(document).ready(function(){

    $("button, input:submit, a.button").button();
	
    $('#lang img').tipsy({
        
        gravity: 'n',
        fade: true
    });	
	
});
	

function load_footer() {
	
	$("button, input:submit, a.button").button();
	
	
	
	
	
}

function load_header() {
	
	
	
	
	
	
		// --- language dropdown --- //

	// turn select into dl
	createDropDown();
	
	var $dropTrigger = $(".dropdown dt a");
	var $languageList = $(".dropdown dd ul");
	
	// open and close list when button is clicked
	$dropTrigger.toggle(function() {
		
		var source = $("#country-options");
		
		if($languageList.length == 0) {
			
			$("#target").append('<dd><ul></ul></dd>')
			var options = $("option", source);
			options.each(function(){
				$("#target dd ul").append('<li><a href="' + $(this).attr("title") + '"><img width="16" height="11" alt="'+ $(this).val() +'" src="http://static.clipconverter.cc/images/flags/' + $(this).val() +'.png"><em>' + $(this).text() + '</em></a></li>');
							
				});
				
			$languageList = $(".dropdown dd ul");
		}
		
		$languageList.slideDown(200);
		$dropTrigger.addClass("active");
	}, function() {
		$languageList.slideUp(200);
		$(this).removeAttr("class");
	});

	// close list when anywhere else on the screen is clicked
	$(document).bind('click', function(e) {
		var $clicked = $(e.target);
		if (! $clicked.parents().hasClass("dropdown"))
			$languageList.slideUp(200);
			$dropTrigger.removeAttr("class");
	});

	// when a language is clicked, make the selection and then hide the list
	$(".dropdown dd ul li a").click(function() {
		var clickedValue = $(this).find("img").attr("src");
		var clickedTitle = $(this).find("em").html();
		$("#target dt img").attr("src", clickedValue);
		$("#target dt em").html(clickedTitle);
		$languageList.hide();
		
	});
	
}




// actual function to transform select to definition list
	function createDropDown(){
		var $form = $("div#country-select form");
		$form.hide();
		var source = $("#country-options");
		source.removeAttr("autocomplete");
		var selected = source.find("option:selected");
		//var options = $("option", source);
		$("#country-select").append('<dl id="target" class="dropdown"></dl>')
		$("#target").append('<dt><a href="#"><img width="16" height="11" alt="'+ selected.val() +'" src="http://static.clipconverter.cc/images/flags/' + selected.val() +'.png"><em>' + selected.text() + '</em></a></dt>')
		//$("#target").append('<dd><ul></ul></dd>')
//		options.each(function(){
	//		$("#target dd ul").append('<li><a href="' + $(this).attr("title") + '"><img width="16" height="11" alt="'+ $(this).val() +'" src="http://static.clipconverter.cc/images/flags/' + $(this).val() +'.png"><em>' + $(this).text() + '</em></a></li>');
		//	});
	}