// base config in pixels
var baseW = 990;
var baseH = 600;

var leftW = 50;

var leftFillupH = baseH - 195; // is 194 but 195 is more safe for all browsers

var menuW = 174;
var menuT = 135;
var menuL = 52;
var menuPt = 25;
var menuPr = 8;
var menuPb = 10;
var menuPl = 8;

var contentT = 135;
var contentR = 60;
var contentB = 15;
var contentL = 270;

var fontSize = 10;

var bgSlideIndex = 0;

var aniDuration = 500;
var aniDurationSlow = 1000;

var slideshowInterval;

var pageHasContent = false;

// config for layout settings
var setMargin = 30;
// Set 1
var set1leftW = 315;
var set1leftH = 450;
var set1RightTopW = 315;
var set1RightTopH = 180;
var set1RightBottomW = 315;
var set1RightBottomH = 240;

// Set 2
var set2TopW = 660;
var set2TopH = 260;
var set2leftW = 280;
var set2leftH = 160;
var set2MiddleW = 160;
var set2MiddleH = 160;
var set2RightW = 160;
var set2RightH = 160;

// Set 3
var set3TopLeftW = 430;
var set3TopLeftH = 290;
var set3TopRightW = 200;
var set3TopRightH = 290;
var set3LeftW = 200;
var set3LeftH = 130;
var set3MiddleW = 200;
var set3MiddleH = 130;
var set3RightW = 200;
var set3RightH = 130;

// Set 4
var set4LeftTopLeftW = 200;
var set4LeftTopLeftH = 260;
var set4LeftTopRightW = 200;
var set4LeftTopRightH = 260;
var set4LeftBottomW = 430;
var set4LeftBottomH = 160;
var set4RightTopW = 200;
var set4RightTopH = 130;
var set4RightMiddleW = 200;
var set4RightMiddleH = 130;
var set4RightBottomW = 200;
var set4RightBottomH = 130;

var addthisToolsT = 450;


// function to scale all elements
function setSizes()
{
    var docW = $('#container').width();
    var docH = $('#container').height();

    var scale = 1;
    var imgScale = 1;

    if(docW / docH < baseW / baseH) // calc sizes using width
    {
        scale = docW / baseW;
        imgScale = docH / baseH;
    }
    else // calc sizes using height
    {
        scale = docH / baseH;
        imgScale = docW / baseW;
    }


    $('#leftFillup').css('height', Math.ceil(docH - leftFillupH) + 'px');

    $('#content').css('right', Math.ceil(scale * contentR) + 'px');
    $('#content').css('bottom', Math.ceil(scale * contentB) + 'px');

    $('#Backgrounds IMG').css('width', Math.ceil(imgScale * baseW) + 'px');
    $('#Backgrounds IMG').css('height', Math.ceil(imgScale * baseH) + 'px');
    $('#Backgrounds IMG').css('margin-left', Math.ceil(docW - imgScale * baseW) * 0.5 + 'px'); // center image
    $('#Backgrounds IMG').css('margin-top', Math.ceil(docH - imgScale * baseH) * 0.5 + 'px'); // center image

    // Layout sets
    // Set 1
    // Margin = left blox height - right boxes heights
    setMargin = Math.ceil(scale * set1leftH) - (Math.ceil(scale * set1RightBottomH) + Math.ceil(scale * set1RightTopH));
    $('.Set1Left').css('height', Math.ceil(scale * set1leftH) + 'px');
    $('.Set1Left').css('width', Math.ceil(scale * set1leftW) + 'px');
    $('.Set1Left IMG.SetMedia').css('height', Math.ceil(scale * set1leftH) + 'px');
    $('.Set1Left IMG.SetMedia').css('width', Math.ceil(scale * set1leftW) + 'px');
    $('.Set1Left IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set1RightTop').css('height', Math.ceil(scale * set1RightTopH)+ 'px');
    $('.Set1RightTop').css('width', Math.ceil(scale * set1RightTopW) + 'px');
    $('.Set1RightTop').css('left', (Math.ceil(scale * set1leftW) + setMargin) + 'px');
    $('.Set1RightTop IMG.SetMedia').css('height', Math.ceil(scale * set1RightTopH) + 'px');
    $('.Set1RightTop IMG.SetMedia').css('width', Math.ceil(scale * set1RightTopW) + 'px');
    $('.Set1RightTop IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set1RightBottom').css('height', Math.ceil(scale * set1RightBottomH) + 'px');
    $('.Set1RightBottom').css('width', Math.ceil(scale * set1RightBottomW) + 'px');
    $('.Set1RightBottom').css('left', (Math.ceil(scale * set1leftW) + setMargin) + 'px');
    $('.Set1RightBottom').css('top', (Math.ceil(scale * set1RightTopH) + setMargin) + 'px');
    $('.Set1RightBottom IMG.SetMedia').css('height', Math.ceil(scale * set1RightBottomH) + 'px');
    $('.Set1RightBottom IMG.SetMedia').css('width', Math.ceil(scale * set1RightBottomW) + 'px');
    $('.Set1RightBottom IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    // Set 2
    // Margin = (topbox width - bottom bloxes width) / 2
    setMargin = (Math.ceil(scale * set2TopW) - (Math.ceil(scale * set2leftW) + Math.ceil(scale * set2MiddleW) + Math.ceil(scale * set2RightW))) / 2;
    $('.Set2Top').css('height', Math.ceil(scale * set2TopH) + 'px');
    $('.Set2Top').css('width', Math.ceil(scale * set2TopW) + 'px');
    $('.Set2Top IMG.SetMedia').css('height', Math.ceil(scale * set2TopH) + 'px');
    $('.Set2Top IMG.SetMedia').css('width', Math.ceil(scale * set2TopW) + 'px');
    $('.Set2Top IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set2Left').css('height', Math.ceil(scale * set2leftH) + 'px');
    $('.Set2Left').css('width', Math.ceil(scale * set2leftW) + 'px');
    $('.Set2Left').css('top', (Math.ceil(scale * set2TopH) + setMargin) + 'px');
    $('.Set2Left IMG.SetMedia').css('height', Math.ceil(scale * set2leftH) + 'px');
    $('.Set2Left IMG.SetMedia').css('width', Math.ceil(scale * set2leftW) + 'px');
    $('.Set2Left IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set2Middle').css('height', Math.ceil(scale * set2MiddleH) + 'px');
    $('.Set2Middle').css('width', Math.ceil(scale * set2MiddleW) + 'px');
    $('.Set2Middle').css('left', (Math.ceil(scale * set2leftW) + setMargin) + 'px');
    $('.Set2Middle').css('top', (Math.ceil(scale * set2TopH) + setMargin) + 'px');
    $('.Set2Middle IMG.SetMedia').css('height', Math.ceil(scale * set2MiddleH) + 'px');
    $('.Set2Middle IMG.SetMedia').css('width', Math.ceil(scale * set2MiddleW) + 'px');
    $('.Set2Middle IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set2Right').css('height', Math.ceil(scale * set2RightH) + 'px');
    $('.Set2Right').css('width', Math.ceil(scale * set2RightW) + 'px');
    $('.Set2Right').css('left', (Math.ceil(scale * set2leftW) + setMargin + Math.ceil(scale * set2MiddleW) + setMargin) + 'px');
    $('.Set2Right').css('top', (Math.ceil(scale * set2TopH) + setMargin) + 'px');
    $('.Set2Right IMG.SetMedia').css('height', Math.ceil(scale * set2RightH) + 'px');
    $('.Set2Right IMG.SetMedia').css('width', Math.ceil(scale * set2RightW) + 'px');
    $('.Set2Right IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    // Set 3
    // Margin = (top boxes width - bottom boxes width)
    setMargin = (Math.ceil(scale * set3TopLeftW) + Math.ceil(scale * set3TopRightW)) - (Math.ceil(scale * set3LeftW) + Math.ceil(scale * set3MiddleW) + Math.ceil(scale * set3RightW));
    $('.Set3TopLeft').css('height', Math.ceil(scale * set3TopLeftH) + 'px');
    $('.Set3TopLeft').css('width', Math.ceil(scale * set3TopLeftW) + 'px');
    $('.Set3TopLeft IMG.SetMedia').css('height', Math.ceil(scale * set3TopLeftH) + 'px');
    $('.Set3TopLeft IMG.SetMedia').css('width', Math.ceil(scale * set3TopLeftW) + 'px');
    $('.Set3TopLeft IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set3TopRight').css('height', Math.ceil(scale * set3TopRightH) + 'px');
    $('.Set3TopRight').css('width', Math.ceil(scale * set3TopRightW) + 'px');
    $('.Set3TopRight').css('left', (Math.ceil(scale * set3TopLeftW) + setMargin) + 'px');
    $('.Set3TopRight IMG.SetMedia').css('height', Math.ceil(scale * set3TopRightH) + 'px');
    $('.Set3TopRight IMG.SetMedia').css('width', Math.ceil(scale * set3TopRightW) + 'px');
    $('.Set3TopRight IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set3Left').css('height', Math.ceil(scale * set3LeftH) + 'px');
    $('.Set3Left').css('width', Math.ceil(scale * set3LeftW) + 'px');
    $('.Set3Left').css('top', (Math.ceil(scale * set3TopLeftH) + setMargin) + 'px');
    $('.Set3Left IMG.SetMedia').css('height', Math.ceil(scale * set3LeftH) + 'px');
    $('.Set3Left IMG.SetMedia').css('width', Math.ceil(scale * set3LeftW) + 'px');
    $('.Set3Left IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set3Middle').css('height', Math.ceil(scale * set3MiddleH) + 'px');
    $('.Set3Middle').css('width', Math.ceil(scale * set3MiddleW) + 'px');
    $('.Set3Middle').css('left', (Math.ceil(scale * set3LeftW) + setMargin) + 'px');
    $('.Set3Middle').css('top', (Math.ceil(scale * set3TopLeftH) + setMargin) + 'px');
    $('.Set3Middle IMG.SetMedia').css('height', Math.ceil(scale * set3MiddleH) + 'px');
    $('.Set3Middle IMG.SetMedia').css('width', Math.ceil(scale * set3MiddleW) + 'px');
    $('.Set3Middle IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set3Right').css('height', Math.ceil(scale * set3RightH) + 'px');
    $('.Set3Right').css('width', Math.ceil(scale * set3RightW) + 'px');
    $('.Set3Right').css('left', (Math.ceil(scale * set3LeftW) + setMargin + Math.ceil(scale * set3MiddleW) + setMargin) + 'px');
    $('.Set3Right').css('top', (Math.ceil(scale * set3TopLeftH) + setMargin) + 'px');
    $('.Set3Right IMG.SetMedia').css('height', Math.ceil(scale * set3RightH) + 'px');
    $('.Set3Right IMG.SetMedia').css('width', Math.ceil(scale * set3RightW) + 'px');
    $('.Set3Right IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    // Set 4
    // Margin = (left top boxes width - left bottom box width)
    setMargin = Math.ceil(scale * set4LeftBottomW) - (Math.ceil(scale * set4LeftTopLeftW) + Math.ceil(scale * set4LeftTopRightW));
    $('.Set4LeftTopLeft').css('height', Math.ceil(scale * set4LeftTopLeftH) + 'px');
    $('.Set4LeftTopLeft').css('width', Math.ceil(scale * set4LeftTopLeftW) + 'px');
    $('.Set4LeftTopLeft IMG.SetMedia').css('height', Math.ceil(scale * set4LeftTopLeftH) + 'px');
    $('.Set4LeftTopLeft IMG.SetMedia').css('width', Math.ceil(scale * set4LeftTopLeftW) + 'px');
    $('.Set4LeftTopLeft IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set4LeftTopRight').css('height', Math.ceil(scale * set4LeftTopRightH) + 'px');
    $('.Set4LeftTopRight').css('width', Math.ceil(scale * set4LeftTopRightW) + 'px');
    $('.Set4LeftTopRight').css('left', (Math.ceil(scale * set4LeftTopLeftW) + setMargin) + 'px');
    $('.Set4LeftTopRight IMG.SetMedia').css('height', Math.ceil(scale * set4LeftTopRightH) + 'px');
    $('.Set4LeftTopRight IMG.SetMedia').css('width', Math.ceil(scale * set4LeftTopRightW) + 'px');
    $('.Set4LeftTopRight IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set4LeftBottom').css('height', Math.ceil(scale * set4LeftBottomH) + 'px');
    $('.Set4LeftBottom').css('width', Math.ceil(scale * set4LeftBottomW) + 'px');
    $('.Set4LeftBottom').css('top', (Math.ceil(scale * set4LeftTopLeftH) + setMargin) + 'px');
    $('.Set4LeftBottom IMG.SetMedia').css('height', Math.ceil(scale * set4LeftBottomH) + 'px');
    $('.Set4LeftBottom IMG.SetMedia').css('width', Math.ceil(scale * set4LeftBottomW) + 'px');
    $('.Set4LeftBottom IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set4RightTop').css('height', Math.ceil(scale * set4RightTopH) + 'px');
    $('.Set4RightTop').css('width', Math.ceil(scale * set4RightTopW) + 'px');
    $('.Set4RightTop').css('left', (Math.ceil(scale * set4LeftBottomW) + setMargin) + 'px');
    $('.Set4RightTop IMG.SetMedia').css('height', Math.ceil(scale * set4RightTopH) + 'px');
    $('.Set4RightTop IMG.SetMedia').css('width', Math.ceil(scale * set4RightTopW) + 'px');
    $('.Set4RightTop IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set4RightMiddle').css('height', Math.ceil(scale * set4RightMiddleH) + 'px');
    $('.Set4RightMiddle').css('width', Math.ceil(scale * set4RightMiddleW) + 'px');
    $('.Set4RightMiddle').css('left', (Math.ceil(scale * set4LeftBottomW) + setMargin) + 'px');
    $('.Set4RightMiddle').css('top', (Math.ceil(scale * set4RightTopH) + setMargin) + 'px');
    $('.Set4RightMiddle IMG.SetMedia').css('height', Math.ceil(scale * set4RightMiddleH) + 'px');
    $('.Set4RightMiddle IMG.SetMedia').css('width', Math.ceil(scale * set4RightMiddleW) + 'px');
    $('.Set4RightMiddle IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    $('.Set4RightBottom').css('height', Math.ceil(scale * set4RightBottomH) + 'px');
    $('.Set4RightBottom').css('width', Math.ceil(scale * set4RightBottomW) + 'px');
    $('.Set4RightBottom').css('left', (Math.ceil(scale * set4LeftBottomW) + setMargin) + 'px');
    $('.Set4RightBottom').css('top', (Math.ceil(scale * set4RightTopH) + setMargin + Math.ceil(scale * set4RightMiddleH) + setMargin) + 'px');
    $('.Set4RightBottom IMG.SetMedia').css('height', Math.ceil(scale * set4RightBottomH) + 'px');
    $('.Set4RightBottom IMG.SetMedia').css('width', Math.ceil(scale * set4RightBottomW) + 'px');
    $('.Set4RightBottom IMG.SetMedia').parent().parent().css('overflow', 'hidden');

    if(typeof(addthis) !== 'undefined')
    {
        $('#addthisTools').css('top', (Math.ceil(scale * addthisToolsT) + setMargin) + 'px');
    }
}


// on load
$(window).load(function() {

    // bind onload on bg images to fade in
    // also check if the menu needs to fade in
    $('#bgImg IMG, #bgImgBlurred IMG').load(function(event){
        $(this).parent().fadeIn(aniDurationSlow);
    });

    // as default #container is set to a fixed size (CSS file) for use without Javascript
    // here we overrule these settings
    $('#container').css('width', 'auto');
    $('#container').css('height', 'auto');
    $('#container').css('top', 0);
    $('#container').css('right', 0);
    $('#container').css('bottom', 0);
    $('#container').css('left', 0);
    $('#container').css('margin', 0);
    $('#container').css('display', 'block');

    setSizes();
    setBgMedia(0);

    if(!window.dontRebuildMenuForContact)
    {
        // Hide content so we can fade them in
        $('#content').hide();
        $('#menu').hide();
        $('.setBlock').hide();
        $('#menuInner').css({opacity: 0.0, visibility: "visible"});
        $('#left').css('left', -50);

        var delayTime = aniDurationSlow;

        delayTime = setMenu(delayTime);
        openMenuByIndex(returnMenuIndexByHash(), delayTime);
    }
});


// on resize scale all elements again
$(window).resize(function() {
    setSizes();
});


/*
 *  animation steps:
 *  1. set bg, fade in; slideshow needed? start slideshow
 *  2. needed to show menu's? fade in
 *  3. open menu
 *  4. cases? blur bg
 *  5. cases? fade in blocks
 *  -- on menu click:
 *  6. cases? fade out blocks
 *  7. cases? unblur bg
 *  8. close menu
 *  9. fade out bg
 *  GOTO 1.
*/


// set bg media and fade in
function setBgMedia(delayTime)
{
    var menuIndex = returnMenuIndexByHash();

    //$('#bgVideo').html('');
    $('#bgImgBlurred').delay(delayTime).fadeOut(aniDurationSlow);
    $('#bgImg').delay(delayTime).fadeOut(aniDurationSlow, function(){
        if(menuItems[menuIndex].bgMedia.length && menuItems[menuIndex].bgMedia[bgSlideIndex].filetype == 'image')
        {
            $('#bgImg IMG').delay(delayTime).attr('src', menuItems[menuIndex].bgMedia[bgSlideIndex].filename + returnBgSize());

            bgSlideIndex ++;
            if(bgSlideIndex >= menuItems[menuIndex].bgMedia.length) bgSlideIndex = 0;
        }
    });
    $('#bgVideo').delay(delayTime).fadeOut(aniDurationSlow, function() {
        if(menuItems[menuIndex].bgMedia.length && menuItems[menuIndex].bgMedia[bgSlideIndex].filetype == 'video')
        {
            $('#bgImg').hide();
            var mediaplayer = flowplayer("bgVideo",
                {
                    src: "scripts/flowplayer-3.2.7.swf",
                    wmode: "transparent",
                    onFail: function() {
                        $('#bgVideo').hide();
                    }
                },
                {
                    clip: {
                        autoPlay: true,
                        autoBuffering: true,
                        onBeforeFinish: function() {
                            return false;
                        }
                    },
                    plugins: {
                        controls: null
                    }
                }
            );
            mediaplayer.play(menuItems[menuIndex].bgMedia[bgSlideIndex].filename);
            mediaplayer.play();

            $('#bgVideo').fadeIn(aniDurationSlow);

            bgSlideIndex ++;
            if(bgSlideIndex >= menuItems[menuIndex].bgMedia.length) bgSlideIndex = 0;
        }
    });

    // multiple backgrounds? then slideshow
    if(menuItems[menuIndex].bgMedia.length > 1)
    {
        clearInterval(slideshowInterval);
        slideshowInterval = setInterval(function() { setBgMedia(0); }, 10000);
    }
    else // else remove the slideshow
    {
        clearInterval(slideshowInterval);
        slideshowInterval = null;
    }
}


// fade in menu's
function setMenu(delayTime)
{
    $('#left').delay(delayTime).animate({left: 0}, aniDuration);

    delayTime += aniDuration;

    $('#menu').delay(delayTime).show(aniDuration);

    delayTime += aniDuration;

    $('#content').fadeIn(aniDuration);

    delayTime += aniDuration;

    $('#menuInner').delay(delayTime).animate({opacity: 1.0}, function () {
        if (!$.support.opacity) {
            this.style.removeAttribute('filter');
        }
    });

    return delayTime;
}


// function to close P content inside #menu
function closeMenu()
{
    var delayTime = 0;

    // Fadeout main_content and hide the blocks (Werk page)
    $('.main_content:visible').delay(delayTime).fadeOut(aniDuration, function() {
        $('.setBlock').hide();
    });

    // Fadeout addthis buttons
    $('#addthisTools').delay(delayTime).fadeOut(aniDuration);

    // Remove select class from previous page
    $('#menu .linkHeader').removeClass('selected');

    // Slide old menu item up and the new item down
    $('#menu .MenuHide:visible').delay(delayTime).slideUp(aniDuration);

    delayTime += aniDuration;

    // reset slide index; set new BG
    bgSlideIndex = 0;
    setBgMedia(delayTime);
    
    delayTime += aniDurationSlow * 2;

    // open menu
    openMenuByIndex(returnMenuIndexByHash(), delayTime);

    return delayTime;
}


// function to open P content inside #menu
function openMenuByIndex(menuIndex, delayTime)
{

    $('#menu #content_' + menuItems[menuIndex]['entry_id']).delay(delayTime).slideDown(aniDuration, function() {
        $('#menu #header_' + menuItems[menuIndex]['entry_id']).addClass('selected');
    });

    if(pageHasContent) delayTime = setPage(delayTime);

    return delayTime;
}


// set all the page data
function setPage(delayTime)
{
    var menuIndex = returnMenuIndexByHash();

    // first 'blur' the background
    if(menuItems[menuIndex].bgMedia[bgSlideIndex].filetype == 'image' && menuItems[menuIndex].bgMedia[bgSlideIndex].filenameBlurred) {
        setTimeout(
            function() {
                var blur = menuItems[menuIndex].bgMedia[bgSlideIndex].filenameBlurred;
                if (blur.substring(blur.length - 4) == 'crop') {
                    $('#bgImgBlurred IMG').attr('src', blur);
                } else {
                    $('#bgImgBlurred IMG').attr('src', blur + returnBgSize());
                }
            }, delayTime
        );
    }
    

    delayTime += aniDurationSlow;
    
    $('#main_content_' + menuItems[menuIndex]['entry_id']).delay(delayTime).fadeIn(aniDuration, function ()
    {
         // Show the setBlocks 1 by 1 for Werk page
        var delay_time = 0;
        var numControls = 6;
        for (var i = 0; i <= numControls; i++)
        {
            $('.block' + i).delay(delay_time).fadeIn(aniDuration);
            delay_time += Math.round(aniDuration);
        }
        
        $('#addthisTools').delay(delay_time).fadeIn(aniDuration);
    });

    delayTime += aniDuration;
    
    return delayTime;
}


// returns the calculated bg size string
function returnBgSize()
{
    var docW = $('#container').width();
    var docH = $('#container').height();
    var mpix = docW * docH;

    var out = '_';

    if(mpix <= 148500)
    {
        out += '495_300'
    }
    else if(mpix <= 594000)
    {
        out += '990_600'
    }
    else if(mpix <= 1336500)
    {
        out += '1485_900'
    }
    else
    {
        out += '1980_1200'
    }

    out += '_crop';
    return out;
}


// returns the menuindex by looking at the url;
function returnMenuIndexByHash()
{
    var hash = window.location.hash.replace('#', '');
    if(hash == '') return 0;
    else
    {
        for(var i = 0; i < menuItems.length; i++)
        {
            if(hash == menuItems[i]['url_title'])
            {
                return i;
            }
        }
    }
    return 0;
}

// to change the menu the hash in the url has to be set
// the function below will detect changes in the url and will open
// the coresponding menu item
// flow:
//      1. set hash in url
//      2. changes are detected by 'detectUrlHashChanges'
//      3. 'openMenuByHash' is called, this will determine the menu index
//      4. 'openMenuByIndex' is called and opens the menu, closing the others
var currentUrlHash = window.location.hash;
function detectUrlHashChanges()
{
    if(window.location.hash != currentUrlHash)
    {
        closeMenu();
        currentUrlHash = window.location.hash;
        if(typeof(addthis) !== 'undefined')
        {
            var addthis_config = {
                data_track_clickback: false
            }
            addthis.toolbox('#addthisTools'); // re-render addthis to get the hash in the share buttons
        }
    }
}
var urlHashChangeInterval = window.setInterval(detectUrlHashChanges, 200);