$(document).ready(function(){
	$(".sel_who").click(toggleWho);
	$(".arrow_left_img").click(showPreviousWho);
	$(".arrow_right_img").click(showNextWho);
    createMovieBox();
});

function toggleWho()
{
	$(".who_uses_webklik_desc").hide();
	$(".tab").removeClass("active");
	$("#"+$(this).attr("rel")).show();
	$(this).parent("li").addClass("active");
}

function showPreviousWho()
{
	var active_tab = $("#footer_nav").find("li.active > a");
	$(active_tab).parent("li").removeClass("active");
	$("#"+$(active_tab).attr("rel")).fadeOut('fast', function(){
        if($(active_tab).attr("rel") == "who_1") {
            $("a[rel=who_3]").parent("li").addClass("active");
            $("#who_3").fadeIn('fast');
        } else if($(active_tab).attr("rel") == "who_2") {
            $("a[rel=who_1]").parent("li").addClass("active");
            $("#who_1").fadeIn('fast');
        } else if($(active_tab).attr("rel") == "who_3") {
            $("a[rel=who_2]").parent("li").addClass("active");
            $("#who_2").fadeIn('fast');
        }
    });
}

function showNextWho()
{
	var active_tab = $("#footer_nav").find("li.active > a");
	$(active_tab).parent("li").removeClass("active");
	$("#"+$(active_tab).attr("rel")).fadeOut('fast', function(){ 
        if ($(active_tab).attr("rel") == "who_3") {
            $("a[rel=who_1]").parent("li").addClass("active");
            $("#who_1").fadeIn('fast');
        } else if($(active_tab).attr("rel") == "who_2") {
            $("a[rel=who_3]").parent("li").addClass("active");
            $("#who_3").fadeIn('fast');
        } else if($(active_tab).attr("rel") == "who_1") {
            $("a[rel=who_2]").parent("li").addClass("active");
            $("#who_2").fadeIn('fast');
        }        
    });
}

function createMovieBox() {
    $('body').append('<div id="demomovie"><iframe src="https://player.vimeo.com/video/19718566?title=0&amp;byline=0&amp;portrait=0" width="640" height="480" frameborder="0"></iframe></div>');
    $('#demomovie').dialog({
        width       : 670,
        height      : 605,
        modal       : true,
        resizable   : false,
        autoOpen    : false,
        open        : function() {
            $('.ui-dialog-titlebar').remove();
            $('.ui-widget-overlay, .ui-dialog').click(function() {
                $('#demomovie').dialog('close');
            });
            $('.ui-dialog').css('position', 'fixed');
        },
        buttons: {
            "Sluiten": function() {
             $(this).dialog('close');
            }
        }
    });
    $('#opendemomovie').click(function() {
        $('#demomovie').dialog('open');
        return false;
    });
}