var vidinfodropdownspeedinfo = 1000;
var vidinfodropdownspeed = 500;

$(document).ready(function(){
    initScreen();

    $('.vidImage').hover(
        function() {
            var $vidMenu = $(this).find('.vidMenu');
            var divheight = $vidMenu.find(".vidInfoLink").outerHeight(true);
            $vidMenu.animate({
                height:divheight
            },
            {
                duration: vidinfodropdownspeed,
                easing: 'easeOutBack'
            });
        },
        function() {
            var $vidMenu = $(this).find('.vidMenu');
            if(!$vidMenu.hasClass("fixedMenu")) {
                $vidMenu.animate({
                    height:0
                },
                {
                    duration: vidinfodropdownspeed / 2,
                    easing: 'easeInBack',
                    complete: function() {
                        $(this).css("overflow", "hidden");
                    }
                });
            }
        }
    );

    $('.vidInfoLink').click(function() {
        var $vid = $(this).parents('.vid')
        var $vidInfo = $vid.find('.vidInfo');
        showInfo($vid, $vidInfo);
    });

    $('.vidPlayLink').click(function() {
        var $vid = $(this).parents('.vid');
        if(!$vid.hasClass("videoOpen")) {
            $animatevideo = $vid;
            resetPrevVideo(true);
            $prevVideo = $vid;
        }/* else {
            resetPrevVideo(false);
        }*/
    });

    $('.showreellink').click(function() {
        var vimeolink = $(this).attr("href");
        $("#latestVid").html('<iframe src="' + vimeolink + '" width="720" height="405" frameborder="0"></iframe>');
        return false;
    });
});

var initScreen = function() {
    var $vidContainer = $("#vidContainer");

    $vidContainer.css({
        "position": "absolute",
        "width": "720px"
    });

    var $childnodes = $vidContainer.find(".vid");
    $childnodes.each(function() {
        var $this = $(this);
        var thisleft = 0;

        if($this.hasClass("col2")) {
            thisleft = 242;
        }
        if($this.hasClass("col3")) {
            thisleft = 484;
        }
        $this.css({
            "position": "absolute",
            "left": thisleft + "px",
            "margin": "0px",
            "z-index": "10"
        });
    });

    adjustHeights();
}

var adjustHeights = function() {
    var $vidContainer = $("#vidContainer");
    var col1height = 0;
    var col2height = 0;
    var col3height = 0;
    var prevColHeight = 0;
    var $childnodes = $vidContainer.find(".vid");
    $childnodes.each(function() {
        var $this = $(this);
        var $prev = $(this).prev('.vid');
        var thisheight = $this.height();

        if($this.hasClass("col1")) {
            $this.css({
                "top": col1height + "px"
            });
            if($this.hasClass("videoOpen"))
            {
                if(col2height > col1height) {
                    $this.css({
                        "top": col2height + "px"
                    });
                    col1height = col2height + thisheight + 6;
                } else {
                    col1height += thisheight + 6;
                }  
            } else {
                col1height += thisheight + 6;
            }
        }
        if($this.hasClass("col2")) {
            if($prev.hasClass("videoOpen")) {
                col2height += $prev.height() + 6;
                if(col1height > col2height) col2height = col1height;
            }
            $this.css({
                "top": col2height + "px"
            });
            if($this.hasClass("videoOpen"))
            {
                if(col3height > col2height) {
                    $this.css({
                        "top": col3height + "px"
                    });
                    col2height = col3height + thisheight + 6;
                } else {
                    col2height += thisheight + 6;
                }
            } else {
                col2height += thisheight + 6;
            }
        }
        if($this.hasClass("col3")) {
            if($prev.hasClass("videoOpen")) {
                col3height += $prev.height() + 6;
                if(col2height > col3height) col3height = col2height;
            }
            $this.css({
                "top": col3height + "px"
            });
            if($this.hasClass("videoOpen"))
            {
                var prevcol2height = col2height - prevColHeight - 6;
                if(prevcol2height > col3height) {
                    $this.css({
                        "top": prevcol2height + "px"
                    });
                    col3height = prevcol2height + thisheight + 6;
                } else {
                    col3height += thisheight + 6;
                }

                if(col2height < col3height) {
                    col2height = col3height;
                    $prev.css({
                        "top": col2height + "px"
                    });
                    col2height += $prev.height() + 6;
                }
            } else {
                col3height += thisheight + 6;
            }
        }

        prevColHeight = thisheight;
    });

    var maxtop = col1height;
    if(col2height > maxtop) maxtop = col2height;
    if(col3height > maxtop) maxtop = col3height;

    var $bdmain = $("#bd-main");
    var bdmainheight = 0;
    $bdmain.children().each(function() {
        if($(this).attr("id") != "vidContainer") bdmainheight += $(this).outerHeight(true);
    })
    $bdmain.height(bdmainheight + maxtop + 8);
}

var showInfo = function($vid, $vidInfo) {
    var divheight = $vidInfo.find("div").outerHeight(true);

    if(!$vidInfo.hasClass("vidInfoOpen")) {
        $vid.height($vid.height() + divheight);
        $(".vidInfoLink", $vid).find('img').attr("src", "assets/images/closeinfo.gif");
        $vidInfo.animate({
            height:divheight
        },
        {
            duration: vidinfodropdownspeedinfo,
            easing: 'easeOutBack'
        });
        adjustHeights();
        $vidInfo.addClass("vidInfoOpen");
    } else {
        $vid.height($vid.height() - divheight);
        $(".vidInfoLink", $vid).find('img').attr("src", "assets/images/meerinfo.gif");
        $vidInfo.animate({
            height:0
        },
        {
            duration: vidinfodropdownspeedinfo / 2,
            easing: 'easeInBack',
            complete: function() {
                adjustHeights();
            }
        });
        $vidInfo.removeClass("vidInfoOpen");
    }
}

var aniamatemethod = 'easeInOutExpo';
var anmiationspeed = 1000;

var $prevVideo = null;
var resetPrevVideo = function(animatenext) {
    if($prevVideo != null && $prevVideo.hasClass("videoOpen"))
    {
        if(!animatenext) $animatevideo = null;

        $prevVideo.find('.closingimage').remove();
        var $vidInfo = $prevVideo.find('.vidInfo');
        
        var vidheight = 163;

        if($vidInfo.hasClass("vidInfoOpen")) {
            $vidInfo.find('div').css({
                "width": 236
            });
            var vidInfoHeight = $vidInfo.find("div").outerHeight(true);

            $vidInfo.css({
                "width": 236,
                "height": vidInfoHeight
            });

            vidheight += vidInfoHeight;
        } else {
            $vidInfo.find('div').css({
                "width": 226
            });

            $vidInfo.css({
                "width": 236
            });
        }

        

        $prevVideo.find('.vidImage').animate({
            "width": 236,
            "height": 133
        },{
            duration: anmiationspeed,
            easing: aniamatemethod
        });

        $prevVideo.animate({
            "height": vidheight,
            "width": 236,
            "background-color": 'transparent'
        },{
            duration: anmiationspeed,
            easing: aniamatemethod,
            complete: function() {
                $(this).css("z-index", "10");
                adjustHeights();
                setTimeout("animateVideo();", 250);
            }
        });

        var $video = $prevVideo.find('.vidVideo');
        $video.html($video.find("iframe").attr("src"));
        $video.css("display", "none");

        $prevVideo.removeClass("videoOpen");
    } else {
        if(animatenext) animateVideo();
    }
}

var $animatevideo = null;
var animateVideo = function() {
    if($animatevideo != null) var $vid = $animatevideo;
    else return;

    var $vidInfo = $vid.find('.vidInfo');
    var vidheight = 317;
    
    if($vidInfo.hasClass("vidInfoOpen")) {
        $vidInfo.find('div').css({
            "width": 478
        });
        var vidInfoHeight = $vidInfo.find("div").outerHeight(true);

        $vidInfo.css({
            "width": 478,
            "height": vidInfoHeight
        });

        vidheight += vidInfoHeight;
    } else {
        $vidInfo.find('div').css({
            "width": 468
        });

        $vidInfo.css({
            "width": 478
        });
    }

    $vid.css("z-index", "15");
    if($vid.hasClass("col1")) {
        $vid.animate({
            "width": 478,
            "height": vidheight
        },{
            duration: anmiationspeed,
            easing: aniamatemethod,
            complete: function() {
                showVideo($(this));
            }
        });
    }
    if($vid.hasClass("col2")) {
        $vid.animate({
            "width": 478,
            "height": vidheight
        },{
            duration: anmiationspeed,
            easing: aniamatemethod,
            complete: function() {
                showVideo($(this));
            }
        });
    }
    if($vid.hasClass("col3")) {
        $vid.css({
            "right": "0px",
            "left": "auto"
        });
        $vid.animate({
            "width": 478,
            "height": vidheight
        },{
            duration: anmiationspeed,
            easing: aniamatemethod,
            complete: function() {
                showVideo($(this));
            }
        });
    }

    $vid.find('.vidImage').css({
        "width": 478,
        "height": 269
    });
    

    $vid.addClass("videoOpen");
}

var showVideo = function($vid) {
    var $video = $vid.find('.vidVideo');
    $video.html('<iframe src="' + $video.html() + '" width="478" height="269" frameborder="0"></iframe>');
    var $img = $('<img />');
    $img.attr({
        "alt": "Sluiten",
        "src": "assets/images/close.gif",
        "class": "closingimage"
    });
    $img.click(function() {
        resetPrevVideo(false);
    })
    $vid.find(".vidImage").after($img);
    $video.css("display", "block");
    adjustHeights();
}