function LightBox(id)
{
    this.boxDiv = document.getElementById(id + 'Box');
    this.backDiv = document.getElementById(id + 'Back');
    this.contentDiv = document.getElementById(id + 'Content');
    this.indexHidden = document.getElementById(id + 'Hidden');
    this.closeButton = document.getElementById(id + 'Close');
    this.leftButton = document.getElementById(id + 'Left');
    this.rightButton = document.getElementById(id + 'Right');

    this.Resize = LB_Resize;
    this.ShowLightBox = LB_ShowLightBox;
    this.Show = LB_Show;
    this.Hide = LB_Hide;
    this.SwitchContent = LB_SwitchContent;
    this.Scroll = LB_Scroll;

    var obj = this;
    if (window.attachEvent)
    {
        window.attachEvent('onresize', function() { obj.Resize(); });
        window.attachEvent('onscroll', function() { obj.Scroll(); });
    }
    else if (window.addEventListener)
    {
        window.addEventListener('resize', function() { obj.Resize(); }, false);
        window.addEventListener('scroll', function() { obj.Scroll(); }, false);
    }
}

function LB_Resize()
{
    if ((this.boxDiv.style.display == '') || (this.boxDiv.style.display == 'none'))
        return;
    var doc = document.documentElement;
	var pageHeight = doc.clientHeight;
	var pageWidth = doc.clientWidth;
	this.backDiv.style.height = doc.scrollHeight + 'px';
	this.backDiv.style.width = doc.scrollWidth + 'px';
	this.boxDiv.style.top = this.top + (pageHeight - this.boxDiv.clientHeight) / 2 + 'px';
	this.boxDiv.style.left = this.left + (pageWidth - this.boxDiv.clientWidth) / 2 + 'px';
}

function LB_ShowLightBox(index)
{
    this.indexHidden.value = index;
    this.Show();
    this.SwitchContent(0);
}

function LB_Show()
{
	var doc = document.documentElement;
	var body = document.body;
    this.top = doc.scrollTop;
    this.left = doc.scrollLeft;
    this.backDiv.style.height = doc.scrollHeight + 'px';
    this.backDiv.style.width = doc.scrollWidth + 'px';
    this.backDiv.style.display = 'block';
    this.boxDiv.style.display = 'block';
}

function LB_Hide()
{
    this.boxDiv.style.display = 'none';
    this.backDiv.style.display = 'none';
}

function LB_SwitchContent(offset)    
{
    var newIndex = parseInt(this.indexHidden.value, 10) + offset;
    var index = 0;
    var height = 250;
    var width = 400;
    for (var i = 0; i < this.contentDiv.childNodes.length; i++)
    {
        var child = this.contentDiv.childNodes[i];
        if (child.tagName != 'DIV')
            continue;
        child.style.display = (index == newIndex) ? 'block' : 'none';
        if (index == newIndex)
        {
            height = child.clientHeight + 20;
            width = child.clientWidth + 20;
        }
        index++;
    }
    this.leftButton.style.display = (newIndex == 0) ? 'none' : 'block';
    this.rightButton.style.display = (newIndex == index - 1) ? 'none' : 'block';
    this.boxDiv.style.height = height + 'px';
    this.boxDiv.style.width = width + 'px';
    this.boxDiv.style.top = this.top + (document.documentElement.clientHeight - height) / 2 + 'px';
    this.boxDiv.style.left = this.left + (document.documentElement.clientWidth - width) / 2 + 'px';
    var btnHeight = height / 2 + 'px';
    this.leftButton.style.height = btnHeight;
    this.rightButton.style.height = btnHeight;
    this.indexHidden.value = newIndex;
}

function LB_Scroll()
{
    if ((this.boxDiv.style.display == '') || (this.boxDiv.style.display == 'none'))
        return;
    var doc = document.documentElement;
    var pageHeight = doc.clientHeight;
    var pageWidth = doc.clientWidth;
    this.top = doc.scrollTop;
    this.left = doc.scrollLeft;
    this.boxDiv.style.top = this.top + (pageHeight - this.boxDiv.clientHeight) / 2 + 'px';
    this.boxDiv.style.left = this.left + (pageWidth - this.boxDiv.clientWidth) / 2 + 'px';
}