//var loadPage = function(obj){
//    var ah1 = $('#menuContent').animate({
//        width: 170,
//        height: 407
//    }, 400);
//    
//    $.when(ah1).done( function(){ 
//        $.ajax({
//            async:true, 
//            type:'post', 
//            complete:function(request, json) {
//                $('#navContent').html(request.responseText); 
//                var ah2 = $('#menuContent').animate({
//                    width: 995,
//                    height: 407
//                }, 400);
//            }, 
//            url:$(obj).attr('href')
//        })
//    });
//}
//

var menuIsBusy = false;
var pos = new Array();
pos[1] = 0;
pos[2] = 0;
pos[3] = 0;
pos[4] = 0;

var Browser = {
    Version: function() {
        var version = 999; // we assume a sane browser
        if (navigator.appVersion.indexOf("MSIE") != -1)
            // bah, IE again, lets downgrade version number
            version = parseFloat(navigator.appVersion.split("MSIE")[1]);
        return version;
    }
}
    
var toggleMenu = function(e) {
    if(!menuIsBusy){
        menuIsBusy = true;
        if(menuIsCollapsed){
            menuIsCollapsed = false;
            clearTimeout(t);
            t = 10000;
            var ah1 = $('#menuContent').animate({
                width: 1,
                height: 407
            }, 400);
                
            $.when(ah1).done( function(){ 
                $('#menuContent').css("height", "0px");
                $('#menuContent').css("width", "0px");
                    
                var ah2 = $('#buttonRight').animate({
                    width: 1
                                
                }, 400);
                    
                $.when(ah2).done( function(){     
                    $('#buttonLeftArrow').hide();
                    $('#buttonRightArrow').show();
                    var ah3 = $('#buttonRight').animate({
                        width: 10
                    }, 400);
                        
                    $.when(ah3).done( function(){     
                        $('#menuHolder').css("width", "115");
                        $('#menuButtonLeft').show();        
                        var ah4 = $('#menuButtonLeft').animate({
                            width: 102
                        }, 400);
                        
                        $.when(ah4).done( function(){      
                            showTagline();
                            var a0 = $("#tagline-" + index).animate({
                                opacity: 100
                            }, 400);
            
                            showSidebar(true);
                            menuIsBusy = false;                
                            $('#menuButton').attr("href", "/nieuws");
                            resumeSlideshow();
                            moving = false;
                        });
                    });
                        
                });
            });
                
        } else {
            menuIsCollapsed = true;
            hideSidebar(true);
            clearTimeout(t);                
            if($('.selectedFeature').hasClass('videoSlide')){
                pauseVideo();
            }
            
            
            var a0 = $("#tagline-" + index).animate({
                opacity: 0
            }, 400);
            
            var a1 = $('#menuButtonLeft').animate({
                width: 1
            }, 400);
        
            $.when(a1).done( function(){ 
                $('#menuHolder').css("width", "1005");
                $('#menuButtonLeft').hide();        
                var a2 = $('#menuButton').animate({
                    marginTop: 0
                }, 400);  
                        
                var a3 = $('img.buttonSpacer').animate({
                    width: 10,
                    height: 183
                }, 400);  
            
                $.when(a2, a3).done( function(){ 
            
                    $('#menuContent').css("height", "407px");
                    $('#menuContent').css("width", "1px");
                    var a4 = $('#menuContent').animate({
                        width: 210,
                        height: 407
                    }, 400);
                
                    $.when(a4).done( function(){ 
                    
                        var a5 = $('#menuContent').animate({
                            width: 995,
                            height: 407
                        }, 400);
                
                        $.when(a5).done( function(){ 
                        
                            var a6 = $('#menuButton').animate({
                                marginTop: 176
                            }, 400);
                        
                            var a7 = $('img.buttonSpacer').animate({
                                width: 10,
                                height: 19
                            }, 400);
                        
                            $.when(a6, a7).done( function(){ 
                                var a8 = $('#buttonRight').animate({
                                    width: 1
                                
                                }, 400);
                            
                                $.when(a8).done( function(){ 
                                    $('#buttonRightArrow').hide();
                                    $('#buttonLeftArrow').show();
                                
                                    var a9 = $('#buttonRight').animate({
                                        width: 10
                                
                                    }, 400);
                                    $.when(a9).done( function (){
                                        $.history.load("/nieuws")
                                        $('#menuButton').attr("href", "");
                                        menuIsBusy = false;  
                                        moving = false;
                                    });
                                });
                            
                            });
                        
                        });
                    });
            
                });
            } );
        
        }
    }
};
    
    


var sidebarIsCollapsed = false;
var sidebarIsBusy = false;    
    
var toggleSidebar = function(e) {
    if(!sidebarIsBusy){
        sidebarIsBusy = true;
        if(sidebarIsCollapsed){
            showSidebar(false);                
        } else {
            hideSidebar(false);
        }
    }
};
    
var hideSidebar = function(hideButton){
    sideBarIsBusy = true;
    
    var ah1 = $('#highlights').animate({
        width: 0
    }, 400);
                
    $.when(ah1).done( function(){     
        var ah2 = $('#highlightsButton').animate({
            width: 1
        }, 400);
                    
        $.when(ah2).done( function(){     
            $('#highlightsButton').hide();
            $('#buttonLeftRightArrow').hide();
            $('#buttonLeftLeftArrow').show();
                
            if(!hideButton && !menuIsCollapsed){
                $('#highlightsButton').show();
                var ah3 = $('#highlightsButton').animate({
                    width: 10
                }, 400);
                $.when(ah3).done( function(){     
                    $('div#highlightsContainer').css("width", "15px");
                    sidebarIsCollapsed = true;
                    sidebarIsBusy = false;
                });
            }else{
                $('div#highlightsContainer').css("display", "none");
                sidebarIsBusy = false;
            }
                
                        
        });
                    
    });
        
}
    
var showSidebar = function(buttonisHidden){
    $('div#highlightsContainer').css("display", "block");
    $('div#highlightsContainer').css("width", "150px");
    var a1;
    if(!buttonisHidden){
        a1 = $('#highlightsButton').animate({
            width: 1
        }, 400);
    }
    $.when(a1).done( function(){     
        $('#highlightsButton').hide();
        $('#buttonLeftLeftArrow').hide();
        $('#buttonLeftRightArrow').show();
                    
        var a2 = $('#highlights').animate({
            width: 140
        }, 400);
                    
        $.when(a2).done( function(){
            $('#highlightsButton').css("width", "1px");
            $('#highlightsButton').show();
            var a3 = $('#highlightsButton').animate({
                width: 10
            }, 400);        
                        
            $.when(a3).done( function(){
                sidebarIsCollapsed = false;
                sidebarIsBusy = false;
            });
        });
    });
}

    
    
var c=0;
var t;
var timer_is_on=0;
var duration = 7000;
var index = 1;
var slideShowIsBusy = false;
var videoIsStopped = false;
var fplayer = null;

var timedCount = function()
{
    if(!menuIsCollapsed){

        if(!$('.selectedFeature').hasClass('videoSlide')){
            nextSlide(); 
        }
    }
}
    
var showTagline = function(){
    if($('#tagline-' + index).hasClass('isEnabled') && !menuIsCollapsed){
        var i = index;
        $(".tagline").css("opacity", 0);
        $(".tagline").show();
        $("#tagline-" + i).css("left", pos[i]);
        setTimeout(function() {
            if(menuIsBusy == false && !$('#feature-' + index).hasClass('videoSlide')){
                $("#tagline-" + index).animate({
                    opacity: 1
                }, {
                    duration: 2000,
                    specialEasing: {
                        opacity: 'swing'
                    },
                    complete: function() {
                    }
                });
            }
        } 
        , 500);
    }
}

var nextSlide = function(){
    if(!slideShowIsBusy){
        clearTimeout(t);
        index ++;       
        if(index >= 5){
            index = 1;
        }
           
        if($('.selectedFeature').hasClass('videoSlide')){
            showSidebar(false);
        }
        slideShowIsBusy = true;
        $(".tagline").hide();
        $(".highlightButtonSelected").removeClass('highlightButtonSelected');
        $("#highlightButton-" + index).addClass('highlightButtonSelected')
                
        $(".selectedFeature").css("z-index", "0");
        $("#feature-" + index).css("z-index", "1");
        
        if(!$('.selectedFeature').hasClass('videoSlide')){
            var a1 = $(".selectedFeature").fadeOut(1000);    
        }
        
        if($('#feature-' + index).hasClass('videoSlide')){
            playVideo();
        }
        
        var a2 = $("#feature-" + index ).fadeIn(1000);
        
            
        $.when(a2).done( function(){  
            //                var a1 = $(".selectedFeature").hide();
            showTagline();
            
            if($('.selectedFeature').hasClass('videoSlide')){
                restartVideo();
            }
            $(".selectedFeature").removeClass('selectedFeature');
            $("#feature-" + index).addClass('selectedFeature')
                       
                     
            slideShowIsBusy = false;
                        
            clearTimeout(t)
            t=setTimeout(function(){
                timedCount(index);
            },duration);
        });
    }
}
    
var resumeSlideshow = function (){
    
    if($('.selectedFeature').hasClass('videoSlide')){
        playVideo();
    }else{
        clearTimeout(t);
        t=setTimeout(function(){
            timedCount(index);
        },duration);
    }
    
}
    
function doTimer()
{
    if (!timer_is_on)
    {
        timer_is_on=1;
        timedCount();
    }
}
    
var highlightButtonClick = function(obj){
    var nr = $(obj).attr('id').split("-")[1] ;
    nr --;
    if((($('.selectedFeature').attr('id').split("-")[1] - 1) == nr) ){
        if($(".selectedFeature").hasClass('videoSlide')){
            restartVideo();
        }
        
    } else {
        if($('.selectedFeature').hasClass('videoSlide')){
            pauseVideo();
        }        
            
        index = nr;
        clearTimeout(t);
        nextSlide();
    }
}
    
var pauseVideo = function(){
    if(supports_video()){
        if($("#kienVideo-" + index)[0].player){
            $("#kienVideo-" + index)[0].player.pause();
        } else {
            $("#kienVideo-" + index).removeAttr('autoplay');
        }
    }else{
        flowplayer("player_" + index).pause();            
    }
}
    
var playVideo = function(){
    videoIsStopped = false;
    if(supports_video()){
        if($("#kienVideo-" + index)[0].player){
            $("#kienVideo-" + index)[0].player.play();
        } else {
            $("#kienVideo-" + index).attr('autoplay', 'true');
        }
    } else {        
        flowplayer("player_" + index).play();            
    }
    setTimeout(function() {        
        if(menuIsBusy == false && $('#feature-' + index).hasClass('videoSlide')){
            hideSidebar(false);
        }
    } 
    , 2500);
}
    
var restartVideo = function(){
    var nr = $('.selectedFeature').attr('id').split("-")[1] ;
    if(supports_video()){
        $("#kienVideo-" + nr)[0].currentTime = 0;
    }
    else{
        flowplayer("player_" + nr).seek(0);
        flowplayer("player_" + nr).play();    
    }
}


function supports_video() {
    return !!document.createElement('video').canPlayType;
}

$(function(){

    pos[1] = $("#tagline-1").css("left");
    pos[2] = $("#tagline-2").css("left");
    pos[3] = $("#tagline-3").css("left");
    pos[4] = $("#tagline-4").css("left");
    
   
    
    var img = new Image();
    img.width = 995;
    img.height = 407;
    img.id = "buttonCanvas"
    img.onload = function() {
        var blendImg = new Image();
        blendImg.onload = function() {
            Pixastic.process(img, "blend", 
            {
                amount : 1, 
                mode : "multiply", 
                image : blendImg, 
                off: {
                    left: 0, 
                    top: 0
                }
            }, function(){
                var canvas = document.getElementById('buttonCanvas');
                var dataURL = canvas.toDataURL("image/png");
                //                alert(dataURL);
                //                $("#menuContent").css("background-image", 'url("' +  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAATCAYAAADoH+FRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTE2MjEwNUJDMEQ2MTFFMEIxMEFBMDAxOEMxRkUxN0MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTE2MjEwNUNDMEQ2MTFFMEIxMEFBMDAxOEMxRkUxN0MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MTYyMTA1OUMwRDYxMUUwQjEwQUEwMDE4QzFGRTE3QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MTYyMTA1QUMwRDYxMUUwQjEwQUEwMDE4QzFGRTE3QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm2n9lEAAAdwSURBVHja7Fh7UFRV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" + '")');                
                $("#menuContent").css("background-image", 'url("' + dataURL + '")');                
            }
            );
        }
        blendImg.src = "/img/layout/kien-oprit.jpg";
    }
    
    
    //    $("#menuBgImg").append(img);
    //    if(Browser.Version() > 8){
    //    if(false){
    //        img.src = "/img/layout/menu-bg.jpg";  
    //    } else {
    ////        $("#menuContent").css("background-image", 'url(/img/layout/menu-bg-5.png)')
    ////        $("#menuContent").css("background-repeat", "repeat")
    //    }
    
    
    

    if(supports_video()){
        $(".video-js").bind("ended", function(){ 
            nextSlide();
        });
    }
    else {
        if ($("a.flplayer").length > 0){
            flowplayer("a.player", {
                src: "/video/flowplayer-3.2.7.swf", 
                wmode: 'transparent'
            }, { 
                // a clip object
                clip: {
                    // a clip event is defined inside clip object
                    onFinish: function() {
                        nextSlide();
                    }
                },
                onLoad: function(){
                    $("object").attr("wmode", "transparent");
                }
            });  
            fplayer = flowplayer(0);
        
        
        }
    }  


    //    $("#menuButton").live("click", toggleMenu);
    //    $('#menuButton').bind( "touchstart", toggleMenu );



    $("#highlightsButton").live("click", toggleSidebar);
    //    $('#highlightsButton').bind( "touchstart", toggleMenu );
    
    
     
    
    
    if(typeof merknaam == 'undefined' && typeof staticPage == 'undefined'){
        setTimeout(function() {
            if(menuIsBusy == false && !$('#feature-' + index).hasClass('videoSlide')){
                hideSidebar(false);
            }
        } 
        , 2500);
    }
    
        
    showTagline();
    t=setTimeout(function(){
        doTimer();
    }, duration);
    
    $('.highlightButton').click(function(){
        highlightButtonClick(this);
    });
    
    $('#menuButton').bind( "touchstart", highlightButtonClick );

    
    if(true){
        $("div.vjs-big-play-button").hide();
    }
    
    $(".feature").css("z-index", "1");
    $(".selectedFeature").css("z-index", "0");
})