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




	// Pulloutmenu
    $('li.js_menubtn').mouseenter(function() {
		$(this).children('.js_pullout').css('display','block');
		}).mouseleave(function() {
		$(this).children('.js_pullout').css('display','none');
	});
	// png fix op document
	// edaarna colorboxinladen (ivm conflict)
    if (typeof $().colorbox != 'function')
    {
        $(document).pngFix().getScript('/public/js/jquery.colorbox-min.js', 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
                });
            });

            /**
            * 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");
			}
        });
    });
	
	$('.tr:nth-child(odd)').addClass('odd');
	$('.tp .td p:nth-child(even)').addClass('even');
    
	$('.hover .tr').hover(
		function () {
			$(this).addClass('hover');
		},
		function () {
			$(this).removeClass('hover');
		}
	);



    $('.js_submitform').live( 'click', function(){
		$(this).parents('form:first').submit();
		return false;
	})
	
	
	jQuery.fn.wait = function (MiliSeconds) {
        $(this).animate({ opacity: '+=0' }, MiliSeconds);
        return this;
    }
	
	$('.popup').fadeOut().wait(1000).fadeIn('slow');	
	$('.popup').click(function(){
		$(this).fadeOut('slow');
	});
	$('.popup .star').click(function(){
		setTimeout(function() {
			window.location.href='/woningen';
		}, 600);
	});

	//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.message+'</p>');
						
						if ( typeof _gaq == 'object' )
							_gaq.push(['_trackPageview', location.pathname + '-bedankt']);
						else if ( typeof pageTracker == 'object' )
							pageTracker._trackPageview( location.pathname + '-bedankt' );
					}
					else if (response.message)
					{
						form.before($('<p class="js_errormelding">'+response.message+'</p>'));
					}
					form.find('.js_hint').trigger('blur');
				}
			})
		})
	}

    init_infohover();
});



/*
//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;
}
 */



function init_infohover( )
{
    $('.icon.info').hover(
        function () {
            $('.tooltip').html('<div class="tooltiptext">'+$(this).html()+'</div>');
            tmpHeight = $('.tooltip').height();
            tmpHeight = tmpHeight / 2;
            $(this).mousemove(function(e){
                $('.tooltip').css('top',(e.pageY - tmpHeight) + 'px');
                $('.tooltip').css('left',(e.pageX + 10) + 'px');
                $('.tooltip').fadeIn('fast');
            })
        },
        function () {
            $('.tooltip').fadeOut('fast');
        }
    );
	
	$('.woningaanbod ul li a').hover(
        function () {
            $('.tooltip').html('<div class="tooltiptext">'+$(this).find('.tooltip-woningoverzicht').html()+'</div>');
            tmpHeight = $('.tooltip').height();
            tmpHeight = tmpHeight / 2;
            $(this).mousemove(function(e){
                $('.tooltip').css('top',(e.pageY - tmpHeight) + 'px');
                $('.tooltip').css('left',(e.pageX + 10) + 'px');
                $('.tooltip').fadeIn('fast');
            })
        },
        function () {
            $('.tooltip').fadeOut('fast');
        }
    );
}