$(document).ready(function () {

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Remove no javascript message ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    $('#noscript').remove();


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Global vars ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    var menuContainer = $('#menuContainer');
    var menuItem = menuContainer.find('li').not($('.door_naar_legebatterijen'));
    var searchBox = $('ul#select_winkel');
    var searchInput = $('input#tbWinkelSearch');
    var winkelNameField = $('input#hfWinkelName');
    var winkelIDField = $('input#hfWinkelId');
    var hfIsPostBack = $('#hfIsPostBack');
    var resultBox = $('ul#select_winkel_options');
    var resultItems = resultBox.find('li');
    var startButton = $('#lbStart');
    var intro_slider = $('#intro_slider');
    var naarBovenButtons = $('.naarboven');
    var crossLinks = $('.crosslink');
    var isAnimating = false;


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Reset scrollTop ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    if ($(window).scrollTop() != 0) setTimeout(function () { scrollToDivision('#division_start') }, 300);
    setFirstMenuItemAsActive();


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Quick search winkels ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    var chosenText = "";
    var chosenValue = "";

    // Init quick search
    searchInput.quicksearch(resultItems);

    /* ~~ Watermark search + show/hide pulldown ~~~ */

    // Display watermark onload
    var defaultValue_search = 'Vul hier een winkelnaam in';
    if (searchInput.val() != defaultValue_search || searchInput.val() == '') {
        searchInput.val(defaultValue_search).addClass('watermrk');
    }

    // Focus and blur
    searchInput.focus(function () {
        if ($(this).val() == defaultValue_search) {
            $(this).val('').removeClass('watermrk');
        }
        showPullDown();
    }).blur(function () {
        if ($(this).val() == '') {
            $(this).val(defaultValue_search).addClass('watermrk');
        }
        //hidePullDown();
    });

    // Show/hide resultbox.
    searchBox.click(function () {
        $(searchInput).focus();
    });
    function showPullDown() {
        if (resultBox.is(':hidden')) {
            if (!isAnimating) {
                isAnimating = true;
                resultBox.slideDown('fast', function () {
                    isAnimating = false;
                    addLogos();
                });
            }
        }
    }
    function hidePullDown() {
        if (resultBox.is(':visible')) {
            if (!isAnimating) {
                isAnimating = true;
                resultBox.slideUp('fast', function () {
                    isAnimating = false;
                });
            }
        }
    }

    // Select option
    resultItems.click(function () {
        var $this = $(this);
        if (!$this.hasClass('noselect')) {
            var chosenText = $this.text();
            var chosenValue = $this.attr('id');
            searchInput.val(chosenText).removeClass('watermrk');
            winkelNameField.val(chosenText);
            winkelIDField.val(chosenValue);
            hidePullDown();
        }
    });


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DOE MEE - Naar gegevens invullen ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    // click startButton ('DOE MEE')
    startButton.click(function () {
        validate_1();
        return false;
    });

    // Validate intro_1
    function validate_1() {
        if (searchInput.val() == '' || searchInput.val() == defaultValue_search) {
            //alert('Geef aan waar jij jouw lege batterijen inlevert!');
            searchInput.val('Actie afgelopen').removeClass('watermrk');
            winkelNameField.val('Actie afgelopen');
            winkelIDField.val('0');
            toUserForm();
        } else {
            toUserForm();
        }
    }

    // Naar gegevens invullen
    function toUserForm() {
        intro_slider.animate({
            'left': '-300px'
        }, {
            easing: 'easeInOutCubic',
            duration: 300,
            complete: function () { }
        });
    }


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Deelnemersform ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    // Global watermark settings
    $.watermark.options = {
        className: 'watermrk',
        useNative: false,
        hideBeforeUnload: true
    };

    // The form fields to be watermarked
    var tbNaam = $('#tbNaam');
    var tbAdres = $('#tbAdres');
    var tbPostcode = $('#tbPostcode');
    var tbPlaats = $('#tbPlaats');
    var tbTelefoon = $('#tbTelefoon');
    var tbEmail = $('#tbEmail');

    // Init watermark
    tbNaam.watermark('Voornaam + Achternaam');
    tbAdres.watermark('Straatnaam + huisnummer');
    tbPostcode.watermark('Postcode');
    tbPlaats.watermark('Woonplaats');
    tbTelefoon.watermark('Telefoonnummer');
    tbEmail.watermark('E-mailadres');

    // Validate intro_2 (on postback)
    if (0 < hfIsPostBack.length) {
        if (hfIsPostBack.val().toString() == '1') {

            // Reset hfPostBack value
            hfIsPostBack.val(0);

            // Set winkel (selected before postback) back to input field
            searchInput.val(winkelNameField.val());

            // Mark missing fields
            $('#flds_deelnemers_data').find('li').each(function () {
                var $this = $(this);
                var inpt = $this.children('input[type="text"]');
                if (inpt.length == 1) {
                    if (inpt.val() == '') {
                        $this.addClass('notValid');
                    }
                }
                if ($('#cbAkkoord:checked').val() === undefined) {
                    $('#lblAkkoord').addClass('notValid');
                }
            });

            // Mark invalid Email address
            if (tbEmail.hasClass('notValidEmail'))
                tbEmail.parent().addClass('notValid');

            // Display intro_2 
            toUserForm();
        }
    }


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Menu items ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    menuItem.find('a').click(function () {
        var divisionID = $(this).attr('href');

        // Scroll to division
        scrollToDivision(divisionID);

        // Set active css
        //menuItem.removeClass('active');
        //$(this).parent().addClass('active');

        // Prevent default
        return false;
    });


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Naar-boven-buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    naarBovenButtons.click(function () {
        scrollToDivision('#division_start');
        setFirstMenuItemAsActive();
        return false;
    });
    function setFirstMenuItemAsActive() {
        menuItem.removeClass('active');
        menuItem.eq(0).addClass('active');
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Crosslinks (text-links die scrollen triggeren) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    crossLinks.click(function () {
        var href = $(this).attr('href');
        scrollToDivision(href);
        return false;
    });


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Verander actief menu item tijdens scrollen ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    var scrollpos = 0;

    $(window).scroll(function () {

        // Update scrollpos onscroll
        scrollpos = $(window).scrollTop();

        // Activate appropriate item according to scrollpos
        if (scrollpos >= $('#division_start').offset().top - 62) {
            menuItem.removeClass('active');
            menuItem.find('a[href="#division_start"]').parent().addClass('active');
        }
        if (scrollpos >= $('#division_prijzen').offset().top - 62) {
            menuItem.removeClass('active');
            menuItem.find('a[href="#division_prijzen"]').parent().addClass('active');
        }
        if (scrollpos >= $('#division_inleveren').offset().top - 62) {
            menuItem.removeClass('active');
            menuItem.find('a[href="#division_inleveren"]').parent().addClass('active');
        }
        if (scrollpos >= $('#division_stibat').offset().top - 62) {
            menuItem.removeClass('active');
            menuItem.find('a[href="#division_stibat"]').parent().addClass('active');
        }

    });



    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Function for scrolling ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    function scrollToDivision(division) {
        if (!isAnimating) {
            isAnimating = true;
            var scrollTopPos = '0px';
            if (division != '#division_start') {
                scrollTopPos = (($(division).offset().top) - 62) + 'px'
            }
            $('html, body').animate({
                'scrollTop': scrollTopPos
            }, {
                easing: 'easeInOutExpo',
                duration: 800,
                complete: function () {
                    isAnimating = false;
                }
            });
        }
    }


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Start Carousel ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    /*	CarouFredSel: an infinite, circular jQuery carousel.
    Configuration created by the "Configuration Robot"
    at caroufredsel.frebsite.nl
    */
    $("#carousel_slider").carouFredSel({
        //width: 535,
        //align: false,
        //height: 436,
        items: {
            visible: 1,
            minimum: 1,
            start: 0,
            //start: "random",
            //width: 535,
            height: 365
        },
        scroll: {
            easing: "easeInOutExpo",
            duration: 600
        },
        auto: {
            pauseDuration: 5000,
            delay: 2000
        },
        pagination: {
            container: "#carousel_paging_ul",
            anchorBuilder: function (nr, item) {
                return "<li><a href='#prijs-" + nr + "'>" + nr + "</a></li>";
            }
        }
    });


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Print element ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    $('a[href="#print"]').click(function () {
        window.print();
        return false;
    });


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Fancybox ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    $(".various").fancybox({
        maxWidth: 800,
        maxHeight: 600,
        fitToView: false,
        width: '70%',
        height: '70%',
        autoSize: false,
        closeClick: false,
        openEffect: 'none',
        closeEffect: 'none'
    });

    $(".naarlocator").fancybox({
        maxWidth: 890,
        maxHeight: 550,
        fitToView: false,
        width: '890',
        height: '550',
        autoSize: false,
        closeClick: false,
        openEffect: 'none',
        closeEffect: 'none',
        scrolling: 'no'
    });


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Add logos ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    function addLogos() {
        resultBox.find('li[id]').each(function () {
            var $this = $(this);
            var id = $this.attr('id');
            $this.css('background', '#ffffff url(/_files/logos/' + id + '.gif) no-repeat 10px 4px');
        });
    }



});