var SWITCH_INTERVAL = 5000;
var ANIMATION_INTERVAL = 40;
var ANIMATION_STEPS = 50;
var currentItem = 0;
var animationStep = 0;
var animationDiv = null;

function removeAllChildren(element) {
    var children = element.childNodes;
    for (var i = children.length - 1; i >= 0; i--)
        element.removeChild(children[i]);
}

function animateOld() {
    if (animationStep == 0) {
        var item = media[currentItem];
        animationDiv = document.createElement("div");
        animationDiv.style.width = item.width + "px";
        animationDiv.style.height = item.height + "px";
        animationDiv.style.position = "absolute";
        animationDiv.style.backgroundColor = "#000";
        var div = document.getElementById("galleryItem");
        div.insertBefore(animationDiv, div.childNodes[0]);
    }
    animationDiv.style.opacity = animationStep/ANIMATION_STEPS;
    animationDiv.style.filter = "alpha(opacity=" + Math.round(100*animationStep/ANIMATION_STEPS) + ")";
    animationStep++;
    setTimeout(animationStep == ANIMATION_STEPS ? function() { switchGallery("new"); } : animateOld, ANIMATION_INTERVAL);
}

function animateNew() {
    if (animationStep == 0) {
        var div = document.getElementById("galleryItem");
        var item = media[currentItem];
        animationDiv = document.createElement("div");
        animationDiv.style.width = item.width + "px";
        animationDiv.style.height = item.height + "px";
        animationDiv.style.position = "absolute";
        animationDiv.style.backgroundColor = "#000";
        animationDiv.style.opacity = 1;
        div.appendChild(animationDiv);
        var add = document.createElement("img");
        add.src = item.src;
        add.width = item.width;
        add.height = item.height;
        div.appendChild(add);
    }
    animationDiv.style.opacity = 1 - animationStep/ANIMATION_STEPS;
    animationDiv.style.filter = "alpha(opacity=" + (100 - Math.round(100*animationStep/ANIMATION_STEPS)) + ")";
    animationStep++;
    if (animationStep == ANIMATION_STEPS)
        setTimeout(function() { switchGallery("normal"); }, SWITCH_INTERVAL);
    else
        setTimeout(animateNew, ANIMATION_INTERVAL);
}

function switchGallery(step) {
    var add, item, div;
    item = media[currentItem];
    if (item.type == "image" && step == "normal") {
        animationStep = 0;
        animateOld();
        return;
    }
    if (item.type == "video") {
        div = document.getElementById("galleryItem_wrapper");
        removeAllChildren(div);
        div.id = "galleryItem";
    }
    else
        removeAllChildren(document.getElementById("galleryItem"));
    currentItem++;
    if (currentItem >= media.length)
        currentItem = 0;
    item = media[currentItem];
    switch(item.type) {
        case "image":
            animationStep = 0;
            animateNew();
            return;
        case "video":
            jwplayer("galleryItem").setup({ flashplayer: PLAYER_PATH, file: item.src, autostart: true, width: item.width, height: item.height });
            jwplayer("galleryItem").onComplete( function() { switchGallery("normal"); } );
            return;
    }
    setTimeout(function() { switchGallery("normal"); }, SWITCH_INTERVAL);
}

function gallery() {
    if (media.length > 1) {
        for (var i = media.length - 1; i >= 0; i--) {
            var item = media[i];
            if (item.type == "image")
                new Image().src = item.src;
        }
        setTimeout(function() { switchGallery("normal"); }, SWITCH_INTERVAL);
    }
}

function imageChange(element, src, size, padding) {
    element.src = src;
    element.style.paddingLeft = padding.left;
    element.style.paddingRight = padding.right;
    element.style.paddingTop = padding.top;
    element.style.paddingBottom = padding.bottom;
    element.style.width = size.width + "px";
    element.style.height = size.height + "px";
}

function getLeft(element) {
    var result = 0;
    while (element) {
        result += element.offsetLeft;
        element = element.offsetParent;
    }
    return result;
}

function getTop(element) {
    var result = 0;
    while (element) {
        result += element.offsetTop;
        element = element.offsetParent;
    }
    return result;
}

function getLink(element) {
    while (element) {
        if (element.tagName == "A")
            return element.href;
        element = element.parentNode;
    }
    return null;
}

function addImageListeners(element, src, name) {
    var image = document.createElement("img");
    image.src = IMAGES_PATH + name + "-over.png";
    image.style.position = "absolute";
    image.style.display = "none";
    image.style.top = (getTop(element) - 6) + "px";
    image.style.cursor = "pointer";
    var padding = parseInt(element.style.paddingLeft, 10);
    if (!padding)
        padding = 0;
    image.style.left = (getLeft(element) - 7 + padding) + "px";
    var link = getLink(element);
    document.body.appendChild(image);
    if (element.addEventListener) {
        element.addEventListener("mouseover", function() { image.style.display = ""; }, false);
        image.addEventListener("mouseout", function() { image.style.display = "none"; }, false);
        image.addEventListener("click", function() { window.location.href = link; }, false);
    }
    else {
        element.attachEvent("onmouseover", function() { image.style.display = ""; });
        image.attachEvent("onmouseout", function() { image.style.display = "none"; });
        image.attachEvent("onclick", function() { window.location.href = link; });

    }
}

function addButtons(element) {
    var link = getLink(element);
    var div = document.createElement("div");
    div.className = "inlinesocial";
    div.style.top = (getTop(element) + 213) + "px";
    div.style.left = (getLeft(element) + 10) + "px";
    div.innerHTML = '<iframe src="//www.facebook.com/plugins/like.php?href=' + encodeURIComponent(link) +
        '&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21&amp;locale=en_US" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px" allowTransparency="true"></iframe>';
    div.innerHTML += '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?url=' + encodeURIComponent(link)
        + '" style="width:130px; height:21px;"></iframe>';
    document.body.appendChild(div);
}

function initializeImages() {
    var elements = document.getElementsByTagName("img");
    for (var i = elements.length - 1; i >= 0; i--) {
        var element = elements[i];
        var src = element.src;
        var j = src.lastIndexOf("/");
        if (j >= 0)
            src = src.substring(j + 1);
        switch(src) {
            case "webwinkel.png":
            case "broodjes.png":
            case "catering.png":
                j = src.indexOf(".");
                src = src.substring(0, j);
                addImageListeners(element, element.src, src);
                addButtons(element);
        }
    }
}

function addCommonImageListeners(info) {
    var image = document.getElementById(info.id);
    if (image) {
        if (image.addEventListener) {
            image.addEventListener("mouseover", function() { image.src = info.over; }, false);
            image.addEventListener("mouseout", function() { image.src = info.out; }, false);
        }
        else {
            image.attachEvent("onmouseover", function() { image.src = info.over; });
            image.attachEvent("onmouseout", function() { image.src = info.out; });
        }
    }
}

function initializeCommonImages() {
    for (var i = overImages.length - 1; i >= 0; i--)
        addCommonImageListeners(overImages[i]);
}

function realUnsetHover(element) {
    if (element.tagName == "IFRAME")
        element.className = "";
    else if (element.style)
        element.style.background = "";
    var children = element.childNodes;
    for (var i = children.length - 1; i >= 0; i--)
        realUnsetHover(children[i]);
}

function unsetHover(except) {
    var divs = document.getElementsByTagName("div");
    for (var i = divs.length - 1; i >= 0; i--) {
        var div = divs[i];
        if (div.className == "complexmenu" && div != except)
            realUnsetHover(div);
    }
}

function setHover(element) {
    if (element.tagName == "IFRAME")
        element.className = "hover";
    else
        switch (element.className) {
            case "left":
                element.style.background = "url(" + IMAGES_PATH + "complex-menu-left.png)";
                break;
            case "right":
                element.style.background = "url(" + IMAGES_PATH + "complex-menu-right.png)";;
                break;
            case "center":
                element.style.background = "url(" + IMAGES_PATH + "complex-menu.png)";;
                break;
        }
    var children = element.childNodes;
    for (var i = children.length - 1; i >= 0; i--)
        setHover(children[i]);
}

function mouseOverComplexMenu(event) {
    var element;
    for (element = event.srcElement; element.className != "complexmenu"; element = element.parentNode);
    unsetHover(element);
    setHover(element);
    event.cancelBubble = true;
}

function mouseOverBody(event) {
    unsetHover(null);
}

function fixIE() {
    if (navigator.userAgent.indexOf("MSIE") > 0) {
        var divs = document.getElementsByTagName("div");
        var i;
        for (i = divs.length - 1; i >= 0; i--) {
            var div = divs[i];
            if (div.className == "complexmenu")
                div.attachEvent("onmouseover", mouseOverComplexMenu);
        }
        document.body.attachEvent("onmouseover", mouseOverBody);
    }
}

function initialize() {
    initializeImages();
    initializeCommonImages();
    gallery();
    fixIE();
}