$(document).ready(function(){
     var modalWindow = {
                            parent:"body",
                            windowId:null,
                            content:null,
                            width:null,
                            height:null,
                            close:function()
                            {
                                $(".modal-window").remove();
                                $(".modal-overlay").remove();
                            },
                            open:function()
                            {
                                var modal = "";
                                modal += "<div class=\"modal-overlay\"></div>";
                                modal += "<div id=\"" + this.windowId + "\" class=\"modal-window\" style=\"width:" + this.width + "px; margin-top:-" + (this.height / 2) + "px; margin-left:-" + (this.width / 2) + "px;\">";
                                modal += this.content;
                                modal += "</div>";

                                $(this.parent).append(modal);

                                $(".modal-window").append("<a class=\"close-window\"></a>");
                                $(".close-window").click(function(){modalWindow.close();});
                                $(".modal-overlay").click(function(){modalWindow.close();});
                            }
                        };

    $(".slider_paginas").show();
    $(".slider_paginas li:first").addClass("slider_select");
    function start(){
    $i = 1;
    play = setInterval(function(){
        $active = $(".slider_paginas li.slider_select").next();
        $(".slider_paginas li").removeClass("slider_select");
        $active.addClass('slider_select');
        if($i>=5)
        {
            $width = 0;
            $i=0;
            $(".slider_paginas li:first").addClass("slider_select");
        }
        else
        {
                $width =  -438*$i;
        }
        $(".afbeeldingen").animate({
            left: $width
        }, 500);
        $i++;
    }, 7000);
    }

    function stop()
    {
        clearInterval(play);
    }

    var openMyModal = function(titel, source)
    {
                            modalWindow.windowId = "myModal";
                            modalWindow.width = 480;
                            modalWindow.height = 405;
                            modalWindow.content = '<div class="modal-text"><h2>'+titel+'</h2><p>'+source+'</p></div>';
                            modalWindow.open();
    };

    $('.slider_paginas li').click(function(){
        stop();
        $active = $(this);
        $(".slider_paginas li").removeClass("slider_select");
        $active.addClass('slider_select');
        $id = $active.attr('rel')-1;
        openMyModal($active.children("a").text(), $active.children("span").html());
        $(".afbeeldingen").animate({ left: -438*$id}, 500);
        return false;
    });
    start();

   
});