jQuery(document).ready(function()
{
    //Set Timeout cuz movies aren't there and this is already loading so the hovers wont work
    setTimeout(function()
    {
        //reserveer buttons hoverstyle on home. in JS because chrome/safari didnt register the css :hover on the buttons
        jQuery("#summary ul li .reserveer a").hover(function()
        {
            jQuery(this).toggleClass("reserveer-btn");
            jQuery(this).toggleClass("reserveer-btn-hover");
        });
    }, 1000);

    //??? Dunno
    jQuery("#programmering ul li.active").next("li").css("marginTop", "-4px");

    //focus on search.
    jQuery(".search").focus(function()
    {
        if (this.value == jQuery(this).attr("rel"))
        {
            this.value = '';
        }
        //Change color to black
        jQuery(this).attr('style', "color: black;");
    });

    //Change color to light grey when clicked out of search bar
    jQuery(".search").blur(function()
    {
        //Should have value
        if (this.value == "")
        {
            this.value = jQuery(this).attr("rel");
        }

        //Color it grey
        jQuery(this).attr('style', "color: #B3B3B3;");
    });

    //Remove class and add active class so the tab will be highlighted
    jQuery("#menu-details-overview li:first a").click(function()
    {
        jQuery("#menu-details-overview li:first a").removeClass();
        jQuery(this).addClass("active");
        jQuery(".fotos").toggle();
    });

    //Remove class and add active class so the tab that has been clicked will be highlighted
    jQuery("#menu-details-overview li a").click(function()
    {
        jQuery("#menu-details-overview li a").removeClass();
        jQuery(this).addClass("active");
        jQuery("#tabs").children().css("display", "none");
        jQuery(".movie-" + this.id).css("display", "block");
    });

    //Set the cursor normal if you hover over a time(where time is empty) in tab voorstelling(performances)
    jQuery("td.time").mouseover(function()
    {
        if (jQuery(this).html() == "")
        {
            jQuery(this).css("cursor", "normal");
        }
    });

    //jQuery UI Effect(http://jqueryui.com/demos/effect/default.html)
    //effect(effect, [options], [speed], [callback])
    //Pulsate Select Date Label
    jQuery("#voorstelling").click(function()
    {
        //Get Date and Set Effect pulsate on it
        jQuery(".SelectDate").effect("pulsate");
    });

    //if querystring jumptotrailer is True                              v
    //example : http://localhost/nl/wat-is-omniversum/films/hubble.aspx?JumpToTrailer=True
    //Get url and convert to string                                     ^
    var windowlocation = window.location + "";

    //Get indexof ? 
    //var indexquestion = windowlocation.indexOf('?');
    //Get indexof =
    var indexis = windowlocation.indexOf('=');

    //Stop if there is no querystring
    if (indexis != -1)
    {
        //Get date from querystring
        var value = windowlocation.substring(indexis + 1, windowlocation.length);

        //if jumptotrailer is true
        if (value == "true")
        {
            //if movie has trailer
            if (jQuery('#trailer').parent().css('display') != 'none')
            {
                //Click trailer tab
                jQuery('#trailer').click();
            }
        }
    }

    //reserve movie & select date
    //Create variables
    var reserveren, movieTitle;

    //Get movie name and set it to variable movieTitle
    movieTitle = jQuery(".title-page").html();

    //Switch for different languages. Set Text into reserveren var
    switch (strLangCode)
    {
        case 'en':
            reserveren = ' ' +
						   '<div class="text">' +
						   '<h2 class="title-reserveren">You want to make a reservation for:</h2>' +
						   '<a class="reserveren-tijd" title="" href="#">Tijd?</a>' +
						   '<p>No date or time has been selected. When do you want to go to the movies?</p>' +
						   '</div>' +
						   '<div class="bottom"></div>';
            break;
        case 'nl':
        default:
            reserveren = '&nbsp;' +
						   '<div class="text">' +
						   '<h2 class="title-reserveren">U wilt reserveren voor:</h2>' +
						   '<a class="reserveren-tijd" title="" href="#">Tijd?</a>' +
						   '<p>Er is nog geen datum en tijd geselecteerd. Wanneer wilt u naar de film?</p>' +
						   '</div>' +
						   '<div class="bottom"></div>';
            break;
    }

    //Set reserveren value into #reserveren div(Standard text if no time is selected)
    jQuery("#reserveren").html(reserveren);

    //If time is selected
    jQuery("td.time").click(function()
    {
        //Set value to vars
        var movieTime = jQuery(this).html().replace(/[^\d:]*/g, '');
        var movieDay = jQuery(this).siblings(':first').children(".dag").html().replace(/[^a-z|A-Z]*/g, '');
        var movieDate = jQuery(this).siblings(':first').children(".date").html().replace(/[^\d\-]*/g, '');
        var movieDateTime = (movieDate + " " + movieTime);
        var strRedirectUrl = jQuery('.RedirectUrl').html();

        //Switch for language text
        switch (strLangCode)
        {
            case 'en':
                var reserverenSelected =
                '&nbsp;' +
                '<div class="text">' +
				'<h2 class="title-reserveren">You want to make a reservation for:</h2>' +
				'<span class="movie-title">' + movieTitle + '</span> on <span class="movie-date">' + movieDay + ' ' + movieDate + '</span> at <span class="movie-time">' + movieTime + '</span>' +
				'</div>' +
                //'<div class="bottom"><div class="default-btn"><a href="#" onclick="belbios_reserveer(\'' + strRedirectUrl + '?id=' + id + '&date=' + movieDate + '&time=' + movieTime + '\',\'\');" title=""><span class="left-side"></span><span class="mid">Make reservation</span><span class="right-side"></span></a></div></div>';
                '<div class="bottom"><div class="default-btn"><a href="#" onclick="BelbiosReserveren(\'' + strRedirectUrl + '?id=' + id + '&datetime=' + movieDateTime + '\');" title=""><span class="left-side"></span><span class="mid">Make reservation</span><span class="right-side"></span></a></div></div>';
                
                break;
            case 'nl':
            default:
                var reserverenSelected = 
                '&nbsp;' +
                '<div class="text">' +
			    '<h2 class="title-reserveren">U wilt reserveren voor:</h2>' +
				'<span class="movie-title">' + movieTitle + '</span> op <span class="movie-date">' + movieDay + ' ' + movieDate + '</span> om <span class="movie-time">' + movieTime + '</span>' +
                '</div>' +
                //'<div class="bottom"><div class="default-btn"><a href="#" onclick="belbios_reserveer(\'' + strRedirectUrl + '?id=' + id + '&date=' + movieDate + '&time=' + movieTime + '\',\'\');" title=""><span class="left-side"></span><span class="mid">Reservering plaatsen</span><span class="right-side"></span></a></div></div>';
                '<div class="bottom"><div class="default-btn"><a href="#" onclick="BelbiosReserveren(\'' + strRedirectUrl + '?id=' + id + '&datetime=' + movieDateTime + '\');" title=""><span class="left-side"></span><span class="mid">Reservering plaatsen</span><span class="right-side"></span></a></div></div>';
                break;
        }

        //Remove class and add active-time
        if (jQuery(this).hasClass("empty") == false)
        {
            jQuery("td.time").removeClass("active-time");
            jQuery(this).addClass("active-time");
            jQuery("#reserveren").html(reserverenSelected);
        }
    });
});

//Window popup for the belbios
function BelbiosReserveren(url)
{
    //Width and Height
    var width = 680;
    var height = 600;

    //Center Popup
    var left = Math.round((screen.width / 2) - (width / 2));
    var top = Math.round((screen.height / 2) - (height / 2));
    
    //Statusbar
    var status = 0;
    //Adressbar
    var location = 0;
    //Resizable
    var resizable = 0;
    
    //Open Popup
    window.open(url, "belbios", "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top + ",status=" + status + ",location=" + location + ",resizable=" + resizable);
}