/**
 * Pager Class
 */
Pager = new Class({
    /**
     * Constructor
     *
     * @param string, the base url, corresponds with the php constant BASE_URL
     */
    initialize: function(base_url) {
        this.base_url = base_url;

        this.parseExternalLinks();

        new SendToAFriendLightbox();
        // OLD TRIGGER
        // new RewardLightbox();
        new AskAQuestionLightbox();
        new VacancyAlertLightbox();
        new Menu(null, document.id('nav-main'));
        new AdvancedSearch();
        new Progress();
    },

    /**
     * @param Element, optional HTML element
     * @return void
     */
    parseExternalLinks: function(root) {
        if (! $type(root)) {
            root = document.id(document.body);
        }

        // the regular expressions a href has to match to open in a new window/tab
        var file_re       = /\.[a-z0-9]{2,4}$/i;
        var javascript_re = /^javascript\:/;
        var http_re       = /^https?\:\/\//i;
        var mailto_re     = /^mailto\:/;

        // get all anchors and loop through them
        var anchor_arr = root.getElements('a');
        for (var i = 0; i < anchor_arr.length; i++) {
            var href = anchor_arr[i].get('href');

            if (this.base_url.test(http_re)) {
                href = href.replace(this.base_url);
            }

            // if the href does not match go to the next anchor in the array
            // a mailto href with an email address will match the re for a file
            if (mailto_re.test(href) || javascript_re.test(href) || ! (file_re.test(href) || http_re.test(href))) {
                continue;
            }

            // open the uri in a new window at the onclick event
            anchor_arr[i].addEvent('click', function(e) {
                // stop default behavior
                new Event(e).stop();

                // open a new window/tab
                window.open(this.get('href'), '_blank');
            });
        }
    }
});

/**
 * Progress Class
 */
Progress = new Class({
    initialize: function() {
        var form = document.id(document.body).getElement('form.cv-upload');

        if (! form) {
            return;
        }

        var submit = form.getElement('input[type=image]');
        var image = form.getElement('#progress');

        var thisObject = this;
        form.addEvent('submit', function() {
            image.setStyle('visibility', 'visible');
            submit.set('disabled', true);
        });
    }
});

/** 
 * Lightbox Class
 */
Lightbox = new Class({
    /**
     * Constructor
     */
    initialize: function() {
        var thisObject = this;

        // get the container element
        this.container = this.getContainer();

        // set the style for the canvas
        this.overlay = this.container.getElement('div.overlay');
        this.overlay.setStyle('opacity', 0);
        this.overlay.addEvent('click', function() {
            // close lightbox
            thisObject.hide();
        });

        // get the canvas
        this.canvas = this.container.getElement('div.canvas');

        // get the content
        this.content = this.container.getElement('div.content');
    },

    /**
     * @param integer
     * @param integer
     * @param string
     * @return void
     */
    show: function(width, height, text) {
        // set the width and height now, the user could have resized it's browser window
        this.overlay.setStyles({
            opacity: 0.8,
            width: Window.getScrollWidth().toInt(),
            height: Window.getScrollHeight().toInt()
        });

        // set the styles for tha canvas, position it in the middle of the window
        this.canvas.setStyles({
            width: width,
            height: height,
            left: ((Window.getWidth().toInt() - width) / 2) + Window.getScrollLeft(),
            top: ((Window.getHeight().toInt() - height) / 2) + Window.getScrollTop()
        });

        // hide all selectboxes for ie6
        this.toggleSelects('hidden');

        this.setContent(text);

        // display the lightbox
        this.container.setStyle('display', 'block');
    },

    /**
     * Set the content of the lightbox
     *
     * @param string
     * @return void
     */
    setContent: function(text) {
        // set the content
        this.content.empty();
        this.content.set('html', text);

        var thisObject = this;
        var anchor_arr = this.content.getElements('a[rel=close]');
        for (var i = 0; i < anchor_arr.length; i++) {
            anchor_arr[i].addEvent('click', function(e) {
                new Event(e).stop();

                thisObject.hide();
            });
        }
    },

    /**
     * @return void
     */
    hide: function() {
        this.content.empty();
        this.container.setStyle('display', 'none');

        // show all selectboxes for ie6
        this.toggleSelects('visible');
    },

    /**
     * Hide/show selectboxes for ie6
     *
     * @param string, hidden or visibile
     * @return void
     */
    toggleSelects: function(visibility) {
        if (! Browser.Engine.trident4) {
            return;
        }

        // array of all selectboxes
        var select_arr = document.id(document.body).getElements('select');

        for (var i = 0; i < select_arr.length; i++) {
            select_arr[i].setStyle('visibility', visibility);
        }
    },

    /**
     * Get the container for the lightbox
     *
     * @return Element
     */
    getContainer: function() {
        var container = document.id('lightbox');

        // if no container in the document create one
        if (! container) {
            container = this.renderContainer();
        }

        // clone the html, in this way another lightbox can use the same html
        return container.clone().inject(document.id(document.body));
    },

    /**
     * Render the lightbox container
     *
     * @return Element
     */
    renderContainer: function() {
        var container = new Element('div', {'class': 'lightbox', 'id': 'lightbox'});
        var overlay = new Element('div', {'class': 'overlay'});

        // use a canvas element, in this way you can animate the lightbox without showing the content
        var canvas = new Element('div', {'class': 'canvas'});
        var content = new Element('div', {'class': 'content'});

        container.inject(document.id(document.body));
        overlay.inject(container)
        canvas.inject(container)
        content.inject(canvas);

        return container;
    }
});

/**
 * VacancyAlertLightbox Class
 */
VacancyAlertLightbox = new Class({
    Extends: Lightbox,

    /**
     * Constructor
     */
    initialize: function() {
        this.parent();

        var form = document.id(document.body).getElement('div.vacancy-alert form');

        // guard
        if (! form) {
            return;
        }

        this.email_input = form.getElement('input[name=email]');
        this.zipcode_input = form.getElement('input[name=zipcode]');
        this.radius_select = form.getElement('select[name=radius]');
        this.button = form.getElement('input.sign-up');

        var email_default = this.email_input.get('value');
        this.email_input.addEvents({
            'focus': function() {
                if (this.get('value') == email_default) {
                    this.set('value', '');
                }
            },
            'blur': function() {
                if (this.get('value') == '') {
                    this.set('value', email_default);
                }
            }
        });

        var zipcode_default = this.zipcode_input.get('value');
        this.zipcode_input.addEvents({
            'focus': function() {
                if (this.get('value') == zipcode_default) {
                    this.set('value', '');
                }
            },
            'blur': function() {
                if (this.get('value') == '') {
                    this.set('value', zipcode_default);
                }
            }
        });

        var thisObject = this;
        this.button.addEvent('click', function(e) {
            new Event(e).stop();

            var request = new Request({
                url: form.get('action') +'/?ajax=true',
                encoding: 'ISO-8859-1',
                onSuccess: function(reponseText, responseXML) {
                    thisObject.show(461, 561, reponseText);
                }
            });
            request.send();
        });
    },

    /**
     * @param integer
     * @param integer
     * @param string
     * @return void
     */
    show: function(width, height, text) {
        this.parent(width, height, text);

        var form = this.content.getElement('form#form-vacancy-alert');

        if (! form) {
            return;
        }

        var field_email = form.getElement('input#field_email');
        var field_pcn = form.getElement('input#pcn');
        var field_pca = form.getElement('input#pca');
        var field_radius = form.getElement('select#field_radius');

        field_email.set('value', this.email_input.get('value'));
        var pcn_re = /([0-9]{4})/i;
        var pcn_arr = this.zipcode_input.get('value').match(pcn_re);
        var pcn = pcn_arr ? pcn_arr[0] : '';
        field_pcn.set('value', pcn);
        var pca_re = /([a-z]{2})/i;
        var pca_arr = this.zipcode_input.get('value').match(pca_re);
        var pca = pcn_arr ? pca_arr[0] : '';
        field_pca.set('value', pca);
        field_radius.set('value', this.radius_select.get('value'));
    },

    /**
     * @param string
     * @return void
     */
    setContent: function(text) {
        this.parent(text);

        var signup = this.content.getElement('input.signup');
        if (signup) {
            var thisObject = this;
            var form = signup.getParent('form');

            signup.addEvent('click', function(e) {
                new Event(e).stop();

                var request = new Request({
                    url: form.get('action') +'/?ajax=true',
                    data: form.toQueryString(),
                    encoding: 'ISO-8859-1',
                    onSuccess: function(reponseText, responseXML) {
                        thisObject.setContent(reponseText);
                    }
                });
                request.send();
            });
        }
    }
});

/**
 * AskAQuestionLightbox Class
 */
AskAQuestionLightbox = new Class({
    Extends: Lightbox,

    /**
     * Constructor
     */
    initialize: function() {
        this.parent();

        this.anchor = document.id(document.body).getElement('a.stel-een-vraag');

        // guard
        if (! this.anchor) {
            return;
        }

        var thisObject = this;
        this.anchor.addEvent('click', function(e) {
            new Event(e).stop();

            var request = new Request({
                url: this.get('href') +'/?ajax=true',
                encoding: 'ISO-8859-1',
                onSuccess: function(reponseText, responseXML) {
                    thisObject.show(461, 561, reponseText);
                }
            });
            request.send();
        });
    },

    /**
     * @param string
     * @return void
     */
    setContent: function(text) {
        this.parent(text);

        var call_me = this.content.getElement('input.call-me');
        if (call_me) {
            var thisObject = this;
            var form = call_me.getParent('form');

            call_me.addEvent('click', function(e) {
                new Event(e).stop();

                var form = this.getParent('form');
                var request = new Request({
                    url: form.get('action') +'/?ajax=true',
                    encoding: 'ISO-8859-1',
                    data: form.toQueryString(),
                    onSuccess: function(reponseText, responseXML) {
                        thisObject.setContent(reponseText);
                    }
                });
                request.send();
            });
        }

        var email_me = this.content.getElement('input.email-me');
        if (email_me) {
            var thisObject = this;
            var form = call_me.getParent('form');

            email_me.addEvent('click', function(e) {
                new Event(e).stop();

                var form = this.getParent('form');
                var request = new Request({
                    url: form.get('action') +'/?ajax=true',
                    encoding: 'ISO-8859-1',
                    data: form.toQueryString(),
                    onSuccess: function(reponseText, responseXML) {
                        thisObject.setContent(reponseText);
                    }
                });
                request.send();
            });
        }
    }
});

/**
 * SendToAFriendLightbox 
 */
SendToAFriendLightbox = new Class({
    Extends: Lightbox,

    /**
     * Constructor
     */
    initialize: function() {
        this.parent();

        this.anchor = document.id(document.body).getElement('a.send-to-a-friend');

        // guard
        if (! this.anchor) {
            return;
        }

        var thisObject = this;
        this.anchor.addEvent('click', function(e) {
            new Event(e).stop();

            var request = new Request({
                url: this.get('href') +'/?ajax=true',
                encoding: 'ISO-8859-1',
                onSuccess: function(reponseText, responseXML) {
                    thisObject.show(461, 561, reponseText);
                }
            });
            request.send();
        });/**/
    },

    /**
     * @param string
     * @return void
     */
    setContent: function(text) {
        this.parent(text);

        var submit = this.content.getElement('input.send-form');
        if (submit) {
            var thisObject = this;
            var form = submit.getParent('form');

            submit.addEvent('click', function(e) {
                new Event(e).stop();

                var form = this.getParent('form');
                var request = new Request({
                    url: form.get('action') +'/?ajax=true',
                    encoding: 'ISO-8859-1',
                    data: form.toQueryString(),
                    onSuccess: function(reponseText, responseXML) {
                        thisObject.setContent(reponseText);
                    }
                });
                request.send();
            });
        }
    }
});

// OLD TRIGGER
///**
// * RewardLightbox
// */
//RewardLightbox = new Class({
//    Extends: Lightbox,
//
//    /**
//     * Constructor
//     */
//    initialize: function() {
//        this.parent();
//
//        this.anchor = document.id(document.body).getElement('div#trigger a');
//
//        // guard
//        if (! this.anchor) {
//            return;
//        }
//
//        var thisObject = this;
//        this.anchor.addEvent('click', function(e) {
//            new Event(e).stop();
//
//            var request = new Request({
//                url: this.get('href') +'/?ajax=true',
//                encoding: 'ISO-8859-1',
//                onSuccess: function(reponseText, responseXML) {
//                    thisObject.show(900, 913, reponseText);
//                }
//            });
//            request.send();
//        });
//    },
//
//    /**
//     * @param string
//     * @return void
//     */
//    setContent: function(text) {
//        this.parent(text);
//    }
//});

/**
 * QuizLightbox
 * This Lightbox can be triggered by flash or anchors in text pages
 */
QuizLightbox = new Class({
    Extends: Lightbox,

    /**
     * Constructor
     *
     * @param string, the url of the page to request the data
     * @param string, the path to the swf file
     * @param string, the path to the xml for the flash
     */
    initialize: function(data_url, swf_path, xml_path) {
        this.parent();

        this.data_url = data_url;
        this.swf_path = swf_path;
        this.xml_path = xml_path;

        // check if there is an anchor that must trigger the quiz
        var anchor = document.id(document.body).getElement('a.iiiiquiz');
        if (anchor) {
            var thisObject = this;
            anchor.addEvent('click', function(e) {
                new Event(e).stop();
                thisObject.request();
            });
        }
    },

    /**
     * Request data for the lightbox from the server
     *
     * @return void
     */
    request: function() {
        var thisObject = this;
        var request = new Request.HTML({
            url: this.data_url +'/?ajax=true',
            onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
                thisObject.show(900, 913, responseHTML);
            }
        });
        request.send();
    },

    /**
     * @param string
     * @return void
     */
    setContent: function(text) {
        this.parent(text);

        // place the flash movie
        var flash = new Swiff(this.swf_path, {
            'width': 697,
            'height': 535,
            'params': {
                'wMode': 'transparent',
                'allowScriptAccess': 'always'
            },
            'vars': {
                'quizXML': this.xml_path
            }
        });
        flash.inject(document.id('quiz'));
    }
});

/**
 * Menu Class
 */
Menu = new Class({
    /**
     * Constructor
     *
     * @param MenuItem
     * @param Element, an ul
     */
    initialize: function(menu_item, container) {
        this.menu_item = menu_item;
        this.container = container;
        this.active_menu_item = null;

        // guard: stop if no HTML Element is found
        if (! this.container) {
            return;
        }

        // get all li tags, and create MenuItems of them
        var li_arr = this.container.getChildren('li');
        for (var i = 0; i < li_arr.length; i++) {
            new MenuItem(this, li_arr[i]);
        }
    },

    /**
     * @param MenuItem
     * @return void
     */
    setActiveMenuItem: function(menu_item) {
        if (this.active_menu_item && (this.active_menu_item != menu_item)) {
            this.active_menu_item.setInActive();
        }

        if (this.active_menu_item) {
            this.active_menu_item.setInActive();
        }

        this.active_menu_item = menu_item;

        if (this.active_menu_item) {
            this.active_menu_item.setActive();
        }
    },

    /**
     * @return void
     */
    show: function() {
        if (! this.container) {
            return;
        }

        this.container.setStyle('display', 'block');
    },

    /**
     * @return void
     */
    hide: function() {
        if (! this.container) {
            return;
        }

        this.container.setStyle('display', 'none');
    }
});

/**
 * MenuItem Class
 */
MenuItem = new Class({
    /**
     * @param Menu
     * @param Element, li tag
     */
    initialize: function(menu, container) {
        this.menu = menu;
        this.container = container;

        this.timeout = null;
        this.submenu = new Menu(this, this.container.getElement('ul'));

        var thisObject = this;
        var anchor = this.container.getElement('a');
        this.text = anchor.get('text');
        anchor.addEvents({
            'mouseover': function() {
                thisObject.mouseOver();
            },
            'mouseout': function() {
                thisObject.mouseOut();
            }
        });
    },

    /**
     * @return void
     */
    mouseOver: function() {
        $clear(this.timeout);
        this.menu.setActiveMenuItem(this);

        // make sure the parent menu's keep open
        var menu_item = this.menu.menu_item;
        while (menu_item) {
            menu_item.setActive();
            menu_item = menu_item.menu.menu_item;
        }
    },

    /**
     * @return void
     */
    mouseOut: function() {
        $clear(this.timeout);
        var thisObject = this;
        this.timeout = this.setInActive.periodical(400, thisObject);

        // hide the parent's menu also
        if (this.menu.menu_item) {
            this.menu.menu_item.mouseOut();
        }
    },

    /**
     * @return void
     */
    setActive: function() {
        $clear(this.timeout);
        this.submenu.show();
        this.container.addClass('sel');
    },

    /**
     * @return void
     */
    setInActive: function() {
        $clear(this.timeout);
        this.submenu.hide();
        this.container.removeClass('sel');
    }
});

/**
 * AdvancedSearch
 */
AdvancedSearch = new Class({
    /**
     * Constructor
     */
    initialize: function() {
        var container = document.id('zipcode-tab');

        // guard
        if (! container) {
            return;
        }

        var city_anchor = container.getElement('li.city');
        var city_input = document.id(document.body).getElement('input[name=city]');
        var city_container = document.id('search-box-city');
        var zipcode_anchor = container.getElement('li.zipcode');
        var zipcode_input = document.id(document.body).getElement('input[name=zipcode]');
        var zipcode_container = document.id('search-box-zipcode');

        // guard
        if (! city_anchor || ! zipcode_anchor || ! city_input || ! zipcode_input) {
            return;
        }

        var form = city_input.getParent('form');

        form.addEvent('submit', function() {
            if (container.hasClass('sel-city')) {
                zipcode_input.set('value', '');
            } else {
                city_input.set('value', '');
            }
        });

        city_anchor.addEvent('click', function(e) {
            new Event(e).stop();

            container.addClass('sel-city');
            city_container.setStyle('display', 'block');
            zipcode_container.setStyle('display', 'none');
        });

        zipcode_anchor.addEvent('click', function(e) {
            new Event(e).stop();

            container.removeClass('sel-city');
            zipcode_container.setStyle('display', 'block');
            city_container.setStyle('display', 'none');
        });
    }
});