var HtmlCalendarControl = function () {
    var root = this;

    this.lng = 3;
    this.exhibition = "EXHIBITION"
    this.ElmId = "datepicker"

    this.Init = function (_lng, _elmId) {

        switch (_lng) {

            case "en":
                this.lng = 3
                break;
            case "nl":
                this.lng = 1
                this.exhibition = "TENTOONSTELLING"
                break;
            case "fr":
                this.lng = 2
                this.exhibition = "EXPOSITION"
                break;
        }

        this.ElmId = _elmId
        var today = new Date()
        GetEventsDatesFromXml(today.getMonth(), today.getFullYear(), function (events, monthurl) {
            calendarEvents = events
            currentMonthUrl = monthurl
            MarkEventDates()
            SetRollOvers()
            SetEventHandlers();
        })

    }

    //1: Nederlands
    //2: Frans
    //3: Engels
    var calendarEvents = new Array();
    var calendarEvents2 = new Array();

    var currentMonthUrl = undefined;


    function SetEventHandlers() {
        $(".ui-datepicker-month, .ui-datepicker-year").live("click", function () {

            if (currentMonthUrl != undefined) {
                window.location = currentMonthUrl;
            }
        })
    }

    function SetRollOvers() {
        $(".test").hover(
            function () {
                color = $(this).find("a").css("color");

                $(this).css("background-color", color);
                $(this).find("a").css("color", "white");

            },
            function () {
                color = $(this).css("background-color");

                $(this).css("background-color", "white");
                $(this).find("a").css("color", color);

            }
        );

        $(".ui-datepicker-title").hover(
            function () {
                $(this).find(".ui-datepicker-month").css("color", "white");
                $(this).find(".ui-datepicker-year").css("color", "white");

            },
            function () {
                $(this).find(".ui-datepicker-month").css("color", "#222222");
                $(this).find(".ui-datepicker-year").css("color", "#222222");
            }
        );
    }

    function MarkEventDates() {

        $.datepicker.regional[2] = { clearText: 'Effacer', clearStatus: '',
            closeText: 'Fermer', closeStatus: 'Fermer sans modifier',
            prevText: 'Préc', prevStatus: 'Voir le mois précédent',
            nextText: 'Suiv', nextStatus: 'Voir le mois suivant',
            currentText: 'Courant', currentStatus: 'Voir le mois courant',
            monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
            monthNamesShort: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'],
            monthStatus: 'Voir un autre mois', yearStatus: 'Voir un autre année',
            weekHeader: 'Sm', weekStatus: '',
            dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
            dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
            dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
            dayStatus: 'Utiliser DD comme premier jour de la semaine', dateStatus: 'Choisir le DD, MM d',
            firstDay: 0,
            initStatus: 'Choisir la date', isRTL: false
        };

        $.datepicker.regional[1] = { clearText: 'verwijder', clearStatus: '',
            closeText: 'sluit', closeStatus: 'Fermer sans maand',
            prevText: 'vorige', prevStatus: 'bekijk vorige maand',
            nextText: 'volgende', nextStatus: 'bevkijk volgende maand',
            currentText: 'Courant', currentStatus: 'bekijk de huidige maand',
            monthNames: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
            monthNamesShort: ['Jan', 'Feb', 'Ma', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            monthStatus: 'Voir un autre mois', yearStatus: 'bekijk een ander jaar',
            weekHeader: 'wk', weekStatus: '',
            dayNames: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'],
            dayNamesShort: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
            dayNamesMin: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
            dayStatus: 'Utiliser DD comme premier jour de la semaine', dateStatus: 'Choisir le DD, MM d',
            firstDay: 0,
            initStatus: 'kies de datum', isRTL: false
        };

        if (root.lng == 1 || root.lng == 2) {
            $.datepicker.setDefaults($.datepicker.regional[root.lng]);
        }

        $("#" + root.ElmId).datepicker({
            firstDay: 1,
            beforeShowDay: function (date) {
                for (i = 0; i < calendarEvents.length; i++) {
                    if (date.getMonth() == calendarEvents[i].date.getMonth()
                              && date.getDate() == calendarEvents[i].date.getDate()
                              && date.getFullYear() == calendarEvents[i].date.getFullYear()) {

                        return [true, "test", ""];
                    }
                }
                return [true, ""]; //enable all other days
            },
            onChangeMonthYear: function (year, month) {
                Preloader(true)

                calendarEvents = calendarEvents2

                GetEventsDatesFromXml(month,year, function (events, monthUrl) {

                    calendarEvents2 = events;
                    currentMonthUrl = monthUrl;
                    SetRollOvers();

                    Preloader(false)
                })
            },
            onSelect: function (dateText, inst) {

                arr = dateText.split("/")
                isFoundUrl = undefined;
                for (i = 0; i < calendarEvents.length; i++) {
                    var month = arr[0]
                    var day = arr[1]

                    if (month.substring(0, 1) == "0") {
                        month = month.replace("0", "")
                    }

                    if (day.substring(0, 1) == "0") {
                        day = day.replace("0", "")
                    }


                    if (parseInt(arr[2]) == calendarEvents[i].date.getFullYear()
                            && parseInt(month) === parseInt(calendarEvents[i].date.getMonth()) + 1
                            && parseInt(day) === parseInt(calendarEvents[i].date.getDate())
                            ) {
                        isFoundUrl = calendarEvents[i].link;
                        break;
                    }
                }

                if (isFoundUrl != undefined) {
                    window.location = isFoundUrl
                }
                else {
                    window.location.reload();
                }
            }

        });

        //$(".ui-datepicker-prev, .ui-datepicker-next").css("display", "none");

    }

    function Preloader(bool) {
        if (bool) {

            //$("#" + root.ElmId).css("visibility", "hidden");
            //$("#" + root.ElmId).fadeTo("slow", 0.30);
            
        }
        else {
            //$(".ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span").css("visibility", "visible");
            //setTimeout(' $("#datepicker").css("visibility", "visible");', 1000)
            // $("#" + root.ElmId).css("visibility", "visible");
            //$("#" + root.ElmId).fadeTo("slow", 1.00);

        }
    }

    function GetEventsDatesFromXml(month, year, callback) {

        var CurrentYear = year;

        var currentMonth = month - 1;
        var FromYear = CurrentYear;
        var ToYear = CurrentYear;

        if (currentMonth <= 0) {
            FromYear--;
            currentMonth = 12
        }


        var nextMonth = month + 2;
        var currentmonthZero = ""
        var nextmonthZero = ""

        if (nextMonth > 12) {
            ToYear++;
            nextMonth = nextMonth - 12
        }

        if (currentMonth < 10) {
            currentmonthZero = "0"
        }

        if (nextMonth < 10) {
            nextmonthZero = "0"
        }

        $.ajax({
            type: "GET",
            url: "/xml/calendar.ashx?lng=" + root.lng + "&from=01-" + currentmonthZero + currentMonth + "-" + FromYear + "&until=01-" + nextmonthZero + nextMonth + "-" + ToYear,
            dataType: "xml",
            success: function (resp) {
                var events = new Array();
                var monthurl = undefined
                $(resp).find("day").each(function () {
                    count = 1;
                    var isGood = false
                    var date = $(this).attr("date")
                    $(this).find("event").each(function () {

                        var ts = $(this)

                        if (ts.attr("genre").indexOf(root.exhibition) == -1) {
                            isGood = true
                        }

                    });

                    if (isGood) {
                        var event = new Object()
                        var arr = $(this).attr("date").split("-");
                        event.date = new Date(parseInt(arr[0]), parseInt(arr[1].replace("0", "")) - 1, parseInt(arr[2].replace("0", "")))
                        event.link = $(this).attr("link")
                        events.push(event);
                    }

                });

                $(resp).find("month").each(function () {
                    var elm = $(this)

                    if (elm.attr("value") == month) {
                        monthurl = elm.attr("link");
                    }
                });


                callback(events, monthurl);

            }
        });

    }


}