/**
 * @(#)basegimmicks.js          0.1  30.Juli.2006
 *
 * Copyright 2007 Synyx GmbH & Co. KG - All Rights Reserved.
 *
 * This software is the proprietary information of Synyx GmbH & Co. KG
 * Use is subject to license terms.
 *
 * Here you can find all the JavaScript gimmicks for the Synyx homepage
 *
 * @author  Thomas Kraft, Synyx GmbH & Co. KG
 * @version 0.1
 */

/**
 * Preloads all needed images for the mouseover effect in the submenu.
 * Preloading is done to have all the images already in memory when the image
 * switching is performed, which will result in more clear switch without delay.
 * This method should be called in the onload attribute of the body tag.
 */
function preloadImages() {
    // We have 12 different images to preload
    var preloadSubMenuImageArray = new Array(12);
    for (var i = 0; i < preloadSubMenuImageArray.length; i++) {
        // All 12 images are 13 x 10 pixels in size
        preloadSubMenuImageArray[i] = new Image(13, 10);
    }
    // Now load all images to client memory. Once loaded the browser will use them from memory instead of loading them again.
    preloadSubMenuImageArray[0].src = '/system/modules/org.synyx.homepage/resources/images/bullet_grey.gif';
    preloadSubMenuImageArray[1].src = '../img/bullet_blue.gif'; 
    preloadSubMenuImageArray[2].src = '/system/modules/org.synyx.homepage/resources/images/bullet_red.gif';
    preloadSubMenuImageArray[3].src = '/system/modules/org.synyx.homepage/resources/images/bullet_yellow.gif';
    preloadSubMenuImageArray[4].src = '/system/modules/org.synyx.homepage/resources/images/bullet_green.gif';
    preloadSubMenuImageArray[5].src = '/system/modules/org.synyx.homepage/resources/images/bullet_turquoise.gif';
    preloadSubMenuImageArray[6].src = '/system/modules/org.synyx.homepage/resources/images/bullet_grey.gif';
    preloadSubMenuImageArray[7].src = '../img/bullet_blue.gif';
    preloadSubMenuImageArray[8].src = '/system/modules/org.synyx.homepage/resources/images/bullet_red.gif';
    preloadSubMenuImageArray[9].src = '/system/modules/org.synyx.homepage/resources/images/bullet_yellow.gif';
    preloadSubMenuImageArray[10].src = '/system/modules/org.synyx.homepage/resources/images/bullet_green.gif';
    preloadSubMenuImageArray[11].src = '/system/modules/org.synyx.homepage/resources/images/bullet_turquoise.gif';
}

/**
 * Highlights the submenu of the given liObject by changing the listStyleImage.
 * Normally the submenu list has a listStyleImage like <code>bullet_grey.png</code>.
 * This function will change this listStyleImage to the inverted one like <code>bullet_grey_invert.png</code>.
 * This function is only executed for browsers different IE or Opera, because they do not allow to change
 * the listStyleImage for single &lt;li&gt; tags, only for the parent &lt;ul&gt; tag, which means all at once.
 *
 * @param liObject the &lt;li&gt; HTMLElement of the current subMenu entry.
 */
function subMenuHighlight(liObject) {
    var agent = navigator.userAgent.toLowerCase();
    if (agent.indexOf('msie') == -1 && agent.indexOf('opera') == -1) {
        var baseImageName = extractBaseName(stripCSSUrlThingy(getStyle(liObject, 'listStyleImage')));
        liObject.style.listStyleImage = 'url(\'' + baseImageName + '_invert.gif\')';
    }
}

/**
 * De-Highlights the submenu of the given liObject by changing the listStyleImage.
 * Im Highlight state the submenu list has a listStyleImage like <code>bullet_grey_invert.png</code>.
 * This function will change this listStyleImage back to the normal one like <code>bullet_grey.png</code>.
 * This function is only executed for browsers different IE or Opera, because they do not allow to change
 * the listStyleImage for single &lt;li&gt; tags, only for the parent &lt;ul&gt; tag, which means all at once.
 *
 * @param liObject the &lt;li&gt; HTMLElement of the current subMenu entry.
 */
function subMenuNormal(liObject) {
    var agent = navigator.userAgent.toLowerCase();
    if (agent.indexOf('msie') == -1 && agent.indexOf('opera') == -1) {
        var baseImageName = extractBaseName(stripCSSUrlThingy(getStyle(liObject, 'listStyleImage')));
        liObject.style.listStyleImage = 'url(\'' + baseImageName + '.gif\')';
    }
}

/**
 * Extracts the 'real' url out of a CSS style with this url(...) string in it.
 * <b>Examples:</b><br />
 * <table><tr><th><b>input string</b></th><th><b>result string</b></th></tr>
 * <tr><td>url(someimage.jpg)</td><td>someimage.jpg</td></tr>
 * <tr><td>url(http://domain.tld/someimage.jpg)</td><td>http://domain.tld/someimage.jpg</td></tr></table>
 *
 * @param cssUrl CSS style url.
 * @return the 'naked' url without this url(...) thingy.
 */
function stripCSSUrlThingy(cssUrl) {
    return (cssUrl.substr(4, cssUrl.length - 5));
}

/**
 * Extracts the base name (without filetype prefix or '_invert' prefix) from a given image filename or url.
 * The filename or url has to have a 3-digit filetype prefix, otherwise it will not work.
 * If there is also a '_invert' prefix before the filetype prefix, it will also be removed.<br />
 * <b>Examples:</b><br />
 * <table><tr><th><b>input string</b></th><th><b>result string</b></th></tr>
 * <tr><td>filename.png</td><td>filename</td></tr>
 * <tr><td>anotherfilename_someprefix.jpg</td><td>anotherfilename_someprefix</td></tr>
 * <tr><td>some/directory/justaname_invert.jpg</td><td>some/directory/justaname</td></tr></table>
 *
 * @param filename the filename or url where the base name should be extracted from.
 * @return the base name which was extracted from the given input string.
 */
function extractBaseName(fileName) {
    var result;
    if (fileName.indexOf('_invert.') == fileName.length - 11) {
        result = fileName.substr(0, fileName.length - 11);
    } else {
        result = fileName.substr(0, fileName.length - 4);
    }
    return result;
}

/**
 * This function is only executed for browsers different Konqueror. because this browser
 * has a strange behaviour while animating this arrows, god knows why.
 */
function animateArrow(liObjectId) {
    var agent = navigator.userAgent.toLowerCase();
    if (agent.indexOf('konqueror') == -1) {
        var liObject = document.getElementById(liObjectId);
        if (liObject.animateArrow != 'true') {
            liObject.animateArrow = 'true';
            liObject.style.position = 'relative';
            setTimeout('doArrowAnimation(\'' + liObjectId + '\', 1);', 70);
        }
    }
}

function stopAnimateArrow(liObjectId) {
    document.getElementById(liObjectId).animateArrow = 'false';
}

function doArrowAnimation(liObjectId, step) {
    var liObject = document.getElementById(liObjectId);
    var howFar = '0';
    if (step == 1 || step == 3) {
        howFar = '1';
    } else if (step == 2) {
        howFar = '2';
    }
    liObject.style.marginLeft = '15px';
    liObject.style.paddingLeft = howFar + 'px';
    liObject.style.left = '-' + howFar + 'px';
    if (step != 4) {
        setTimeout('doArrowAnimation(\'' + liObjectId + '\', ' + (step + 1) + ');', 70);
    } else {
        if (liObject.animateArrow == 'true') {
            setTimeout('doArrowAnimation(\'' + liObjectId + '\', 1);', 70);
        }
    }
}

function pxDelete(stringToDeleteFrom) {
    var result = stringToDeleteFrom;
    if (stringToDeleteFrom.indexOf('px') != -1) {
        result = stringToDeleteFrom.substr(0, stringToDeleteFrom.length - 2);
    }
    return result;
}

function switchMainMenuColors(idPrefix) {
    var elementLeft = document.getElementById(idPrefix + '_left');
    var elementRight = document.getElementById(idPrefix + '_right');
    var bgColorLeft = getStyle(elementLeft, 'backgroundColor');
    var bgColorRight = getStyle(elementRight, 'backgroundColor');
    elementLeft.style.backgroundColor = bgColorRight;
    elementRight.style.backgroundColor = bgColorLeft;
}

function getStyle(element, cssRule) {
    if(document.defaultView && document.defaultView.getComputedStyle) {
        var value = document.defaultView.getComputedStyle(element, '').getPropertyValue(
                cssRule.replace(/[A-Z]/g,
                        function(match, char) {
                            return "-" + match.toLowerCase();
                        }
                )
        );
    } else if (element.currentStyle) {
        var value = element.currentStyle[cssRule];
    } else {
        var value = false;
    }
    return value;
}