function myGetElementByClassName(className)
{
    var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
    var allElements = document.getElementsByTagName("*");
    var results = [];

    var element;
    for (var i = 0; (element = allElements[i]) != null; i++) {
        var elementClass = element.className;
        if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
	        results.push(element);
    }

    return results;
}

var index = 1;
var span = 4;

function getPicture(index)
{
    return document.getElementById('pic' + index);
}

function moveLeft()
{
    if(index == 1)
    {
        return;
    }    
    
    var nextPicture = getPicture(index - 1);
    if(nextPicture)
    {
        index -= 1;
        
        nextPicture.firstChild.style["display"] = "block";
        nextPicture.firstChild.style["width"] = "128px";
        nextPicture.style["width"] = "150px";
    }
}

function moveRight()
{
    if(getPicture(index + span))
    {
        var hidePicture = getPicture(index);
        if(hidePicture)
        {
            index += 1;
            
            
            hidePicture.firstChild.style["display"] = "none";
            hidePicture.firstChild.style["width"] = "0px";
            hidePicture.style["width"] = "0px";
        }
    }
}

function moveLeftFast()
{
    for(var i = 0; i < span; i++)
    {
        moveLeft();
    }
}

function moveRightFast()
{
    for(var i = 0; i < span; i++)
    {
        moveRight();
    }
}

function extractNumber(num)
{
    if(num.length < 2)
    {
        return num;
    }
    
    return num.substring(0, num.length - 2);
}

var stylesheet = false;
var originalHeight = 0;

function adjustPictureHeight()
{
    var description = document.getElementById('descriptionText');
    if(description)
    {
        var newHeight = description.offsetHeight;
                
        var templateStyleSheet = getStyleSheet('contentTemplate');
        if(templateStyleSheet)
        {
            var oldRule = getCSSRuleFromStyleSheet('a.thumbnail:hover .expandedThumbnail', templateStyleSheet);
            var secondRule = getCSSRuleFromStyleSheet('a.thumbnail .heldImage', templateStyleSheet);
                               
            if(stylesheet)
            {
                var newCss = (10 + parseInt(newHeight) + originalHeight) + 'px';
            }
            else
            {
                var newCss = (10 + parseInt(newHeight) + parseInt(extractNumber(oldRule.style.top))) + 'px';
                stylesheet = true;
                originalHeight = parseInt(extractNumber(oldRule.style.top));
            }
            
            var browser=navigator.appName;
            if(browser == "Microsoft Internet Explorer")
            {
                oldRule.style.top = newCss;
                secondRule.style.top = newCss;
            }
            else
            {
                oldRule.style.setProperty('top', newCss, 'important');
                secondRule.style.setProperty('top', newCss, 'important');
            }
            
            /// ??? what is this
            // $("#favoritesOnlinePopUp").css('top', ((parseInt(array[0]) * 39) - 5 + 1) * -1);
        }
    }
}

function showPicture(image)
{
    var browser=navigator.appName;

    hideAllPictures();
    
    stopHover();
    
    var count = 0;
    var holdImage = image.nextSibling;
    while(holdImage.tagName != 'IMG' && count < 10)
    {
        count++;
        holdImage = holdImage.nextSibling;
        alert(holdImage.tagName + ' : ' + count);
    }
    
    if(count < 10)
    {
        holdImage.className = "heldImage";
    }
}

function swapClasses(fromClass, toClass)
{
    var browser=navigator.appName;

    var els = myGetElementByClassName(fromClass);
    for(var i = 0; i < els.length; i++)
    {
        if(browser == "Microsoft Internet Explorer")
        {
            els[i].setAttribute("className", toClass);
        }
        else
        {
            els[i].setAttribute("class", toClass);
        }   
    }
}

function hideAllPictures()
{
    swapClasses("heldImage", "expandedThumbnail");
}

function stopHover()
{
    swapClasses("expandedThumbnail", "grippedImage");
}

function releaseHold()
{
    swapClasses("grippedImage", "expandedThumbnail");
}

function hidePicture()
{
    releaseHold();
    hideAllPictures();
}