document.createElement('header');
document.createElement('footer');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('aside');

$(document).ready(function(){	
	// flash inladen
	// als een div aangemaakt wordt met als class "js_flash",
	// en als inhoud het absolute pad naar de flash en de variable
	// wordt deze automatisch ingeladen
	$('.js_flash').each(function(){
		slideshowvars = $(this).find('.js_flashlink').html();
		//strip HTML comment from flash vars
		slideshowvars = slideshowvars.replace(/^<!--/, "");
		slideshowvars = slideshowvars.replace(/-->$/, "");
		slideshowheight = $(this).css('height');
		slideshowwidth = $(this).css('width');
		$(this).html("");
		$(this).flash({
	    	src: slideshowvars,
	    	width: slideshowwidth,
	    	height: slideshowheight,
			wmode: 'transparent',
			allowFullScreen: 'true'
		});
	});

	
	$('.js_flashfont').each(function(){
		slideshowvars = $(this).find('span').html();
		if (!slideshowvars)
			slideshowvars = $(this).html();
		obj = $(this).attr('id');
		slideshowheight = '100%';
		$(this).html("");
		$(this).flash({
	    	src: '/public/flash/flashfont.swf?txt='+slideshowvars+'&obj='+obj,
	    	width: 410,
	    	height: slideshowheight,
			wmode: 'transparent'
		});
	});

	
	// png fix op document
	// edaarna colorboxinladen (ivm conflict)
    $(document).pngFix().getScript('/public/js/jquery.colorbox-min.js', function() {
		//## colorbox ##
		if (typeof $().colorbox == 'function')
		{
			/**
			*         -- Gebruik --
			*         Geef een anchor de class .js_colorbox en de href de locatie van de afbeelding
			*         Voor een slideshow:
			*         Geef meerdere anchor's met .js_colorbox dezelfde rel="" waarde
			*         Voorbeeld slideshow:
			*         <a class="js_colorbox" rel="testblaat" href="/public/img/video2.jpg">klik</a>
			*         <a class="js_colorbox" rel="testblaat" href="/public/img/banner.jpg">klik</a>
			*/
			//set
			$('.js_colorbox').colorbox({
					   transition:'elastic'
			});

			/**
			* Html tonen in colorbox:
			* <a class="js_htmlcolorbox" rel="idvanjehtmldiv">Klik</a>
			*/
			$('.js_htmlcolorbox').click(function(){
				var targetid = $(this).attr('rel');
				if (typeof targetid == 'undefined' || targetid == '') return ;
	
				$(this).colorbox({
					open: true,
					inline:true,
					transition:'none',
					href:"#" + targetid
				});
			});
			
			/**
			* Slideshowimage tonen in colorbox:
			* <a class="js_imagecolorbox" rel="image">Klik</a>
			*/
			$('.js_imagecolorbox').click(function(){
				var targetid = $(this).attr('rel');
	
				$(this).colorbox({
					transition:'elastic'
				});
			});

			/**
			* Contact form tonen in colorbox:
			* Verschil met htmlcolorbox is
			* dat deze de pagina herlaadt als hij sluit
			* (om form te resetten)
			* <a class="js_contactcolorbox" rel="idvanjehtmldiv">Klik</a>
			*/
			$('.js_contactcolorbox').click(function(){
				var targetid = $(this).attr('rel');
				if (typeof targetid == 'undefined' || targetid == '') return ;
				
				$(this).colorbox({
					open: true,
					inline:true,
					transition:'none',
					href:"#" + targetid,
					onClosed:function(){
						// pagina herladen
						if(ajaxFormChanged) {
							window.location.href = window.location.href;
						}
					}
				});
			});

			/**
			* Youtube movie tonen in colorbox:
			*         Voor een slideshow:
			*         Geef meerdere anchor's met .colorbox dezelfde rel="" waarde
			*         Voorbeeld slideshow:
			* <a class="js_youtubecolorbox" rel="testblaat" href="http://www.youtube.com/v/[movie-id]">Klik</a>
			*/
			$('.js_youtubecolorbox').colorbox({
				iframe:true,
				innerWidth: 640,
				innerHeight:505,
				transition:'elastic'
			});
		}   
    });


	//field hints
	$(".js_hintfield").each(function(i) {
        var beginStyle = $(this).attr("style");
		$(this).addClass("js_hint");
		$(this).val($(this).attr("title"));

        $(this).bind("focus", function(e) {
            if ($(this).val() == $(this).attr("title")) {
                $(this).val("");
				$(this).removeClass("js_hint");
            }
        });
        $(this).bind("blur", function(e) {
            if ($(this).val() == "") {
				$(this).addClass("js_hint");
				$(this).val($(this).attr("title"));
            } else {
				$(this).removeClass("js_hint");
			}
        });
    });
	
	// slider (sudo slider)
	$(".js_slider").sudoSlider({ 
        prevNext: false,
		speed:'300',
		pause: '4000',
		clickableAni: true,
        customLink:'a.js_sliderlink',
		auto: true
    });
	
	$(".js_next").click(function(){
		$(".js_slider").sudoSlider('next');
		if($(this).hasClass('js_continue')){
			$(".js_slider").sudoSlider('start');			
		}
	});
	
	$(".js_prev").click(function(){
		if($(".current").attr('rel') == 1){
			$(".js_slider").sudoSlider('last');
		} else {
			$(".js_slider").sudoSlider('prev');
		}
		if($(this).hasClass('js_continue')){
			$(".js_slider").sudoSlider('start');			
		}
	});
	

	//submit form link
	$('.js_submitform').click(function(){
		$(this).parents('form:first').submit();
		return false;
	});


	//AJAX FORMS automatisch
	if (typeof $().ajaxForm == 'function')
	{
		$('form.js_ajaxform').each(function(){
			$(this).append('<input type="hidden" name="ajax_post" value="oke" />');
			var form = $(this);
			$(this).ajaxForm({
				dataType: 'json',
				beforeSerialize: function(){
					form.find('.js_hint').val('');
				},
				beforeSubmit: function(){
					form.parent().find('.js_errormelding').remove();

					//vereiste velden
					form.find('.js_required').each(function(){
						if ($(this).val().replace(' ', '') == '' || $(this).hasClass('js_hint')) //leeg of bevat nog de hint
						{
							return false;
							$(this).addClass('js_formerror');
						}
						else
							$(this).removeClass('js_formerror');
					});
					form.find('.js_required.email').each(function(){
						var regex = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
						if (!regex.test($(this).val()))
						{
							return false;
							$(this).addClass('js_formerror');
						}
					});
				},
				success: function(response){
					if (response.success)
					{
						form.html('<p>'+response.melding+'</p>');
					}
					else if (response.melding)
					{
						form.before($('<p class="js_errormelding">'+response.melding+'</p>'));
					}
					form.find('.js_hint').trigger('blur');
				}
			})
		})
	}
	

});

function flashResize(h,obj) {
	$('#'+obj).css('height',h);
}

/*
//slide an element up without causing blinking flash content
 
function slideUp(object, speed, slideTime)
{
    if (parseInt(speed) == NaN) return false;
    if (object.jquery == undefined) object = $(object);
	if (object.height() <= 0) return true;
    object.css('overflow', 'hidden');
    var ppf = (object.height() / speed * 20);
    var orgh = object.height();
    var timeout = setInterval(function(){
        object.height(object.height() - ppf);
        if (object.height() <= 0){
            object.hide();
            object.height(orgh);
            clearInterval(timeout);
        }
    }, 10);
    return true;
}

//slide an element down without causing blinking flash content
function slideDown(object, speed)
{
    if (parseInt(speed) == NaN) return false;
    if (object.jquery == undefined) object = $(object);
    object.css('overflow', 'hidden');
    var ppf = (object.height() / speed * 20);
    var orgh = object.height();
    object.height(0);
    object.show();
    var timeout = setInterval(function(){
        object.height(object.height() + ppf);
        if (object.height() >= orgh){
            object.height(orgh);
            clearInterval(timeout);
        }
    }, 10);
    return true;
}
 */