/**
* setup some local variables
*/
var brandFeatureId      = null;
var brandLinkPattern    = null;
var brandThumbPattern   = null;
var brandFeatureImage   = new Array();
var brandThumbImage     = new Array();
var brandTitle          = new Array();
var brandDescription    = new Array();

/**
* trigger all of the brand responses from a link mouseover
*
* @param link element
* @return void
*/
function doLinkBrandOver(e)
{
    e = (e) ? e : ((window.event) ? event : null);
    if (e)
    {
        var element = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null);
        if (element)
        {
            var regexp = new RegExp(brandLinkPattern + '([0-9]+)');
            var match = element.id.match(regexp);

            if (match)
            {
                document.getElementById(brandThumbPattern + match[1]).onmouseover();
                loadBrandFeature(match[1] - 1);
            }
        }
    }
}

/**
* trigger all of the brand responses from a link mouseout
*
* @param link element
* @return void
*/
function doLinkBrandOut(e)
{
    e = (e) ? e : ((window.event) ? event : null);
    if (e)
    {
        var element = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null);
        if (element)
        {
            var regexp = new RegExp(brandLinkPattern + '([0-9]+)');
            var match = element.id.match(regexp);

            if (match)
            {
                document.getElementById(brandThumbPattern + match[1]).onmouseout();
                resetBrandFeature(match[1] - 1);
            }
        }
    }
}

/**
* trigger all of the brand responses from a thumbnail mouseover
*
* @param thumbmail element
* @return void
*/
function doThumbnailBrandOver(e)
{
    e = (e) ? e : ((window.event) ? event : null);
    if (e)
    {
        var element = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null);
        if (element)
        {
            var regexp = new RegExp(brandThumbPattern + '([0-9]+)');
            var match = element.id.match(regexp);

            if (match)
            {
                document.getElementById(brandLinkPattern + match[1]).style.color = '#fff';
                loadBrandFeature(match[1] - 1);
            }
        }
    }
}

/**
* trigger all of the brand responses from a thumbnail mouseout
*
* @param thumbnail element
* @return void
*/
function doThumbnailBrandOut(e)
{
    e = (e) ? e : ((window.event) ? event : null);
    if (e)
    {
        var element = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null);
        if (element)
        {
            var regexp = new RegExp(brandThumbPattern + '([0-9]+)');
            var match = element.id.match(regexp);

            if (match)
            {
                document.getElementById(brandLinkPattern + match[1]).style.color = '#ccc';
                resetBrandFeature(match[1] - 1);
            }
        }
    }
}

/**
* initialize the brand by setting up the appropriate images and text for swapping
*
* @param feature id
* @param link id pattern
* @param thumbnail id pattern
* @param "feature-image|thumbnail-image|title|description"
* @param [...] more brand info
*/
function initializeBrand()
{
    if (document.getElementById)
    {
        brandFeatureId      = arguments[0];
        brandLinkPattern    = arguments[1];
        brandThumbPattern   = arguments[2];

        if (document.getElementById(brandFeatureId))
        {
            // force starting index
            var match = null;

            // snatch up the images to remember
            for (var i = 0; i < (arguments.length - 3); i++)
            {
                match = arguments[i+3].split('|');

                if (match && (match.length == 4))
                {
                    brandFeatureImage[i]    = match[0];
                    brandThumbImage[i]      = match[1];
                    brandTitle[i]           = match[2];
                    brandDescription[i]     = match[3];

                    // attach mouseover and mouseout events to the links
                    if (document.getElementById(brandLinkPattern + (i + 1)))
                    {
                        addEvent(document.getElementById(brandLinkPattern + (i + 1)), 'mouseover', doLinkBrandOver);
                        addEvent(document.getElementById(brandLinkPattern + (i + 1)), 'mouseout', doLinkBrandOut);
                    }

                    // attach the same reaction to the thumbnails as well
                    if (document.getElementById(brandThumbPattern + (i + 1)))
                    {
                        addEvent(document.getElementById(brandThumbPattern + (i + 1)), 'mouseover', doThumbnailBrandOver);
                        addEvent(document.getElementById(brandThumbPattern + (i + 1)), 'mouseout', doThumbnailBrandOut);
                    }
                }
            }
        }
    }
}

/**
* load the feature to show the details about a particular feature
*
* @param feature index
* @return void
*/
function loadBrandFeature(idx)
{
    document.getElementById(brandFeatureId).innerHTML = '<table><tr><td><img alt="' + brandTitle[idx] + '" src="' + brandFeatureImage[idx] + '"/></td><td><h4>' + brandTitle[idx] + '</h4><div class="double-line"><span style="margin-bottom:2px;" class="hr"></span><span class="hr"></span></div><div class="text">' + brandDescription[idx] + '</div></td></tr></table>';
}

/**
* reset the feature to the default empty grey state
*
* @param void
* @return void
*/
function resetBrandFeature()
{
    document.getElementById(brandFeatureId).innerHTML = '<table class="empty"><tr><td>&nbsp;</td></tr></table>';
}