$(function() {
    $('#photos').galleryView({
        panel_width: 600,
        panel_height: 300,
        frame_width: 80,
        frame_height: 80,
        background_color: 'transparent',
        border: 'none',
        fadeBackground: true,
        bgPath: "Content/images/themes/",
        fixedBgElement: "#content",
        fadingBgElement: "#contentbg"

    });
    setupScrollbar();
    initShowroomForm(); // showroom, 1e
    initAdviesContactForm(); // advies, 2e
    initBrochureContactForm(); // brochure, 3e

    $('a#contactBezoek').click(function() {
        openShowroomForm();
        return false;
    });

    $('a#verpakkingsAdvies').click(function() {
        openAdviesContactForm();
        return false;
    });

    $('a#brochureAanvraag').click(function() {
        openBrochureContactForm();
        return false;
    });

});



setupScrollbar = function() {
    var realHeight = $('div#textcontent').outerHeight(true);
    var visibleHeight = $('div#text').height();
    var scrollbarHeight = $('div#scrollbar').height();

    var handlerHeight = (visibleHeight / realHeight) * 100;
    if (handlerHeight > 100) {
        handlerHeight = 100;
        $('div#scrollbar').hide();
    }
    else {
        $('div#handler').css({ 'height': handlerHeight + '%' });
        $("div#handler").draggable({
            containment: 'parent',
            axis: 'y',
            drag: function(evt, el) {

                var restHeight = $('div#scrollbar').height() - $('div#handler').height();
                var toppos = el['position']['top'];

                var scrollPct = toppos / restHeight;


                // scroll unit...

                var hiddenPartHeight = realHeight - visibleHeight;
                var margin = scrollPct * hiddenPartHeight;


                $('div#textcontent').css({ 'marginTop': '-' + margin + 'px' });
            }

        });
    }
}

openShowroomForm = function() {

    $('div#showroomForm').dialog('open');
    var rand = Math.random() * 10000000;
    $.ajax({
        type: "GET",
        url: '/Contact/ContactShowroom?x=' + rand,
        success: function(msg) {
            $('div#showroomForm').append(msg);
            $('div#showroomForm div.loader').hide();
            $('div#showroomForm').dialog('option', 'title', 'Bezoek onze showroom');
            $('div#showroomForm').dialog('option', 'position', ['center', '30']);
            showroomListener();
        }
    });
}


initShowroomForm = function() {
    var dialog = $('<div id="showroomForm" />').appendTo('body');
    var loader = $('<div class="loader" />').appendTo(dialog);
    $(dialog).dialog({
        title: 'loading...',
        modal: true,
        close: function() {
            $('div#showroomForm').dialog('destroy');
            $('div#showroomForm').remove();
            initShowroomForm();
        },

        autoOpen: false

    });
}

showroomListener = function() {
    var container = $('div#contactShowroom');
    var form = $(container).find('form');
    $(form).validate({
        debug: true,
        submitHandler: function(form) {
            var val = $(form).serialize();
            $(container).find('div#loading').show();
            $.ajax({
                type: "POST",
                url: "/Contact/ContactShowroom",
                data: val,
                success: function(msg) {
                    $(container).html(msg);
                }
            });
        },
        rules: {
            companyname: {
                required: true
            },
            contactPerson: {
                required: true
            },
            emailAddress: {
                required: true,
                email: true
            },
            phoneNumber: {
                required: true,
                minlength: 10
            },
            comment: {
                required: false
            }
        },
        messages: {
            companyname: "Bedrijfsnaam verplicht",
            contactPerson: "Contactpersoon verplicht",
            emailAddress: {
                required: "E-mailadres verplicht",
                email: "Geen geldig e-mailadres adres (naam@email.nl)"
            },
            phoneNumber: {
                required: "Telefoonnummer is verplicht",
                minlength: "Telefoonnummer moet minimaal 10 tekens lang zijn"
            }
        }


    });
}

openAdviesContactForm = function() {
    $('div#contactFormAdvies').dialog('open');
    $.ajax({
        type: "GET",
        url: '/Contact/ContactDirect',
        success: function(msg) {
            $('div#contactFormAdvies').append(msg);
            $('div#contactFormAdvies div.loader').hide();
            $('div#contactFormAdvies').dialog('option', 'title', 'Verpakkingsadvies');
            $('div#contactFormAdvies').dialog('option', 'position', ['center', '30']);
            adviesContactFormListener();
        }
    });
}

initAdviesContactForm = function() {
    var dialog = $('<div id="contactFormAdvies" />').appendTo('body');
    var loader = $('<div class="loader" />').appendTo(dialog);
    $(dialog).dialog({
        title: 'loading...',
        modal: true,
        close: function() {
            $('div#contactFormAdvies').dialog('destroy');
            $('div#contactFormAdvies').remove();
            initAdviesContactForm();
        },
        autoOpen: false
    });
}

adviesContactFormListener = function() {
    var container = $('div#contactDirect');
    var form = $(container).find('form');
    $(form).validate({
        debug: true,
        submitHandler: function(form) {
            var val = $(form).serialize();
            $(container).find('div#loading').show();
            $.ajax({
                type: "POST",
                url: "/Contact/ContactDirect",
                data: val,
                success: function(msg) {
                    $(container).html(msg);
                }
            });
        },
        rules: {
            companyname: {
                required: true
            },
            contactPerson: {
                required: true
            },
            address: {
                required: true
            },
            zipcodePlace: {
                required: true
            },
            country: {
                required: false
            },
            emailAddress: {
                required: true,
                email: true
            },
            phoneNumber: {
                required: true,
                minlength: 10
            },
            comment: {
                required: false
            }
        },
        messages: {
            companyname: "Bedrijfsnaam verplicht",
            contactPerson: "Contactpersoon verplicht",
            address: "Adres verplicht",
            zipcodePlace: "Postcode + plaats verplicht",
            emailAddress: {
                required: "E-mailadres verplicht",
                email: "Geen geldig e-mailadres adres (naam@email.nl)"
            },
            phoneNumber: {
                required: "Telefoonnummer is verplicht",
                minlength: "Telefoonnummer moet minimaal 10 tekens lang zijn"
            }
        }


    });
}

openBrochureContactForm = function() {
    $('div#contactFormBrochure').dialog('open');
    $.ajax({
        type: "GET",
        url: '/Contact/ContactBrochure',
        success: function(msg) {
            $('div#contactFormBrochure').append(msg);
            $('div#contactFormBrochure div.loader').hide();
            $('div#contactFormBrochure').dialog('option', 'title', 'Brochure aanvraag');
            $('div#contactFormBrochure').dialog('option', 'position', ['center', '30']);
            BrochureContactFormListener();
        }
    });
}


initBrochureContactForm = function() {
    var dialog = $('<div id="contactFormBrochure" />').appendTo('body');
    var loader = $('<div class="loader" />').appendTo(dialog);
    $(dialog).dialog({
        title: 'loading...',
        modal: true,
        close: function() {
            $('div#contactFormBrochure').dialog('destroy');
            $('div#contactFormBrochure').remove();
            initBrochureContactForm();
        },
        autoOpen: false
    });
}

BrochureContactFormListener = function() {
    var container = $('div#brochureform');
    var form = $(container).find('form');
    $(form).validate({
        debug: true,
        submitHandler: function(form) {
            var val = $(form).serialize();
            $(container).find('div#loading').show();
            $.ajax({
                type: "POST",
                url: "/Contact/ContactBrochure",
                data: val,
                success: function(msg) {
                    $(container).html(msg);
                }
            });
        },
        rules: {
            companyname: {
                required: true
            },
            contactPerson: {
                required: true
            },
            address: {
                required: true
            },
            zipcodePlace: {
                required: true
            },
            country: {
                required: false
            },
            emailAddress: {
                required: true,
                email: true
            },
            phoneNumber: {
                required: true,
                minlength: 10
            },
            comment: {
                required: false
            }
        },
        messages: {
            companyname: "Bedrijfsnaam verplicht",
            contactPerson: "Contactpersoon verplicht",
            address: "Adres verplicht",
            zipcodePlace: "Postcode + plaats verplicht",
            emailAddress: {
                required: "E-mailadres verplicht",
                email: "Geen geldig e-mailadres adres (naam@email.nl)"
            },
            phoneNumber: {
                required: "Telefoonnummer is verplicht",
                minlength: "Telefoonnummer moet minimaal 10 tekens lang zijn"
            }
        }


    });
}