$(document).ready(function() {
	$('body').addClass('js-on');

	$('div.info').hide();
	$('.hashelp').focus(
		function () {
			var popupid = '#'+$(this).attr('id')+'_help';
			$(popupid).show();
		});
	$('.hashelp').blur(
		function () {
			var popupid = '#'+$(this).attr('id')+'_help';
			$(popupid).hide();
		});

	$('div.chart').hide();
	$('img.chartimg').hover(
		function () {
			var popupid = '#'+$(this).attr('id')+'_view';
			console.log(popupid);
			$(popupid).show();
		},
		function () {
			var popupid = '#'+$(this).attr('id')+'_view';
			console.log(popupid);
			$(popupid).hide();
		}
	);
	
	// ******************************************************
	// Change Me!
	// 
	
	// $("#popkes li input").hide();
	$("#popkes li input").parent().parent().removeClass('checked');
	$("#popkes li input:checked").parent().parent().addClass('checked');
	
	$('#popkes li label img').click(function(){
		if($(this).next().attr('checked')!='checked') {
			$(this).next().attr('checked','checked');
		} else {
			$(this).next().attr('checked','');
		}
	});
	
	$('#popkes li').click(function(){
		$("#popkes li input").parent().parent().removeClass('checked');
		$("#popkes li input:checked").each(function(){
			$(this).parent().parent().addClass('checked');
			if($(this).attr('name')=='pupke[skin]') $('#live-popke div.popke img').next().attr('class',$(this).attr('id'));

			if($(this).attr('name')=='pupke[haircolour]') {
				var hair = $('#live-popke div.popke img').next().next();
				var hairstyle = hair.attr('class').substring(0,hair.attr('class').length-1);
				var haircolour = $(this).attr('id').substring($(this).attr('id').length-1);
				if(haircolour==0) hairstyle = 'kapsel0';
				hair.attr('class',hairstyle+haircolour);
			}		
			
			if($(this).attr('name')=='pupke[hairstyle]') {
				var hair = $('#live-popke div.popke img').next().next();				
				var hairstyle = $(this).attr('id').substring(0,$(this).attr('id').length-1);
				var haircolour = hair.attr('class').substring(hair.attr('class').length-1);
				if(hairstyle=="kapsel6" || hairstyle=="kapsel0") {
					hair.attr('class',$(this).attr('id'));					
				} else {
					if(haircolour=='0') haircolour = 'a';
					hair.attr('class',hairstyle+haircolour);										
				}
			}
			
		    if($(this).attr('name')=='pupke[glasses]') $('#live-popke div.popke img').next().next().next().attr('class',$(this).attr('id'));
			if($(this).attr('name')=='pupke[accessories]')  $('#live-popke div.popke img').next().next().next().next().attr('class',$(this).attr('id'));
		});
	});
	
	$('.wrapanswers input').change(function(){
		$(this).parent().parent().find('label').removeClass('selected').addClass('not-selected');
		$(this).parent().removeClass('not-selected').addClass('selected');
	});
	
	if($('table.answers'))
	{
		$('table.answers').each(function(){
			var table = $(this);
			table.before('<div class="wrapanswers"><h3>'+$(this).find('th').html()+'</h3><ul class="answers"></ul></div>');
			var ul = table.prev().find('ul.answers');
			//ul.before('<h3>'+$(this).find('th').html()+'</h3>');
			
			$(this).find('.avatar_y div.popke').parent().each(function(){
				email=$(this).find('.popke').attr('title');
				username = email.substring(0,email.indexOf('@'));
				balloon = '<div class="popke-id"><span><em>'+username+'</em></span></div>';
				$('<li>'+balloon+$(this).html()+'</li>').appendTo(ul);
			});
			$(this).find('.avatar_n div.popke').parent().each(function(){
				email=$(this).find('.popke').attr('title');
				username = email.substring(0,email.indexOf('@'));
				balloon = '<div class="popke-id"><span><em>'+username+'</em></span></div>';
				$('<li>'+balloon+$(this).html()+'</li>').appendTo(ul);
			});
			$(this).find('.avatar_u div.popke').parent().each(function(){
				email=$(this).find('.popke').attr('title');
				username = email.substring(0,email.indexOf('@'));
				balloon = '<div class="popke-id"><span><em>'+username+'</em></span></div>';
				$('<li>'+balloon+$(this).html()+'</li>').appendTo(ul);
			});
			
			table.remove();
		});
		$('.answers .popke-id').hide();
		$('.answers .popke').hover(
	      function () {
	       //if($.support.cssFloat) 
			$(this).prev().show();
	 		 if(!$.support.objectAll) $(this).parent().parent().prev().children().css('visibility','hidden'); //IE7 fix
	      }, 
	      function () {
			$(this).prev().hide();
	        if(!$.support.objectAll) $(this).parent().parent().prev().children().css('visibility','visible'); //IE7 fix
	      }
	    );
	}
	$.datepick.regional['en'] = {
			monthNames: ['January','February','March','April','May','June',
			'July','August','September','October','November','December'],
			monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
			'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
			dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
			dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'],
			dateFormat: 'mm/dd/yyyy', firstDay: 1,
			renderer: $.datepick.defaultRenderer,
			prevText: 'Prev', prevStatus: 'Show the previous month',
			prevJumpText: '&#x3c;&#x3c;', prevJumpStatus: 'Show the previous year',
			nextText: 'Next', nextStatus: 'Show the next month',
			nextJumpText: '&#x3e;&#x3e;', nextJumpStatus: 'Show the next year',
			currentText: 'Current', currentStatus: 'Show the current month',
			todayText: 'Today', todayStatus: 'Show today\'s month',
			clearText: 'Clear', clearStatus: 'Erase the current date',
			closeText: 'Done', closeStatus: 'Close without change',
			yearStatus: 'Show a different year', monthStatus: 'Show a different month',
			weekText: 'Wk', weekStatus: 'Week of the year',
			dayStatus: 'Select DD, M d', defaultStatus: 'Select a date',
			isRTL: false
		};
	
	$.datepick.regional['nl'] = {
		monthNames: ['januari', 'februari', 'maart', 'april', 'mei', 'juni',
		'juli', 'augustus', 'september', 'oktober', 'november', 'december'],
		monthNamesShort: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun',
		'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
		dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
		dayNamesShort: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'],
		dayNamesMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
		dateFormat: 'dd-mm-yyyy', firstDay: 1,
		renderer: $.datepick.defaultRenderer,
		prevText: '←', prevStatus: 'Bekijk de vorige maand',
		prevJumpText: '«', nextJumpStatus: 'Bekijk het vorige jaar',
		nextText: '→', nextStatus: 'Bekijk de volgende maand',
		nextJumpText: '»', nextJumpStatus: 'Bekijk het volgende jaar',
		currentText: 'Vandaag', currentStatus: 'Bekijk de huidige maand',
		todayText: 'Vandaag', todayStatus: 'Bekijk de huidige maand',
		clearText: 'Wissen', clearStatus: 'Wis de huidige datum',
		closeText: 'Sluiten', closeStatus: 'Sluit zonder verandering',
		yearStatus: 'Bekijk een ander jaar', monthStatus: 'Bekijk een andere maand',
		weekText: 'Wk', weekStatus: 'Week van het jaar',
		dayStatus: 'dd-mm-yyyy', defaultStatus: 'Kies een datum',
		isRTL: false
	};
	var language = $('html').attr('lang');
	if(!language) language = 'en';
	$.datepick.setDefaults($.datepick.regional[language]);
	if(language=='en') {
		var calendar_title = 'Click to use the date-picker';
	} else {
	 	var calendar_title = 'Klik om de kalender te gebruiken';		
	}
	$('#options').datepick({dateFormat:'DD d MM yyyy',multiSeparator:'\n',multiSelect:30, showAnim: '', showOnFocus:false, showTrigger: 
	    '<img src="/d/images/calendar.png" width="19" height="16" alt="calendar" id="calendar" title="'+calendar_title+'" />'});
	$("#options + img").attr('id','calendar'); // FIXME: datepicker class removes id

	
	
});