// JScript File
var FadeSpeedControls = 1;
var SlideShowSpeed = 7000;
var FadeSpeedSlideShowImage = 50;
var SlideShowSliderStep = 5;
var SlideShowSliderSpeed = 1;

var SlideshowPreviousLink = '<img src="%%jsImagePath%%slideshow/prev.gif" border="0"/>';
var SlideshowNextLink = '<img src="%%jsImagePath%%slideshow/nxt.gif" border="0"/>';
var SlideshowPlayLink = '<img src="%%jsImagePath%%slideshow/play.gif" border="0"/>';
var SlideshowPauseLink = '<img src="%%jsImagePath%%slideshow/pause.gif" border="0"/>';

var RunDebug = false;
var SlideShowStore = new Array();

function StopAllSlideShows()
{
    for (var i=0; i<SlideShowStore.length; i++)
        StopShow(SlideShowStore[i]);
}

function AddSlideShowToStore(id)
{
    var found = false;
    for (var i=0; i<SlideShowStore.length; i++)
    {
        if (SlideShowStore[i]==id)
        {
            found = true;
            break;
        }
    }
    if (!found) SlideShowStore[SlideShowStore.length] = id;
}

function AddSlideshowControls(id, GalleryItems, maxsidesize, bgColor)
{   
    if (!bgColor) bgColor = '';
    if (bgColor != '') bgColor = '_' + bgColor;
    
    if (!maxsidesize) maxsidesize = 250; 
    
    AddSlideShowToStore(id);
    
    var loading = jsImagePath + 'loading_bg' + bgColor + '.gif';
    //Declare all the variables in the global scope
    eval('ControlFadeInstance' + id + '=null;');
    eval('SlideShowPlayInstance' + id + '=null;');
    eval('SlideShowLoadingImage' + id + '="' + loading + '";');
    eval('SlideShowFadeInstance' + id + '=null;');
    eval('SlideShowSlideInstance' + id + '=null;');
    eval('FadingDirectionControls' + id + '=0;');
    eval('FadingDirectionSlideShow' + id + '=0;');
    eval('SlideShowMaxSideSize'+ id + '=' + maxsidesize + ';');
    eval('SlideShowItemFirstLoad' + id + '=true');
    
    //Create The Div    
    var div = document.createElement('div');
    div.setAttribute('id', 'divSlideshowControls' + id);
    div.style.visibility = 'hidden';
    div.style.position = 'absolute';
    div.style.zIndex = '9998';
    
    if (GalleryItems.substr(0, 16) == 'GetGalleryItems#')
    {
        GalleryItems = GalleryItems.substr(16);
        sndReq('/xml/GetGalleryItemsForSlideShow.aspx?id=' + id + '&Gallery=' + GalleryItems);
        eval('SlideShowImages' + id + ' = new Array();');
        SetDivContentLoading(id);
    }
    else
    {
        eval('SlideShowImages' + id + ' = new Array(' + GalleryItems + ');');
        div.innerHTML = BulidPagingControlsContent(id);
    }
    
    cntrl = document.getElementById('lnk' + id);
    if (!cntrl) cntrl = document.getElementById(id);
    
    //Wrap image in divs to allow sliding and loading
    
    var divContent = AddWrapperDiv(cntrl, 'divSlideShowContent' + id);
    
    if (divContent)
    {
        divContent.style.height = '100%';
        divContent.style.width = '100%';    
        divContent.style.textAlign = 'center';
        

        var divContentLoading =  AddWrapperDiv(divContent, 'divSlideShowContentLoading' + id);
        divContentLoading.style.height = '100%';
        divContentLoading.style.width = '100%';
        divContentLoading.style.backgroundPosition = '50% 50%'; 
        divContentLoading.style.backgroundRepeat = 'no-repeat';
        
        var divSlideShowContentSlider =  AddWrapperDiv(divContentLoading, 'divSlideShowContentSlider' + id);
        divSlideShowContentSlider.style.overflow = 'hidden';

        //Set The Over and Out States    
        divSlideShowContentSlider.onmouseover = function () { SlideShowImageOver(id); };
        div.onmouseover = function () { ControlMoveOver(id) };
        divSlideShowContentSlider.onmouseout = function () { SlideShowImageOut(id); };

        divSlideShowContentSlider.appendChild(div);
        divSlideShowContentSlider.style.height = document.getElementById('divSlideShowContent' + id).offsetHeight + 'px';
        divSlideShowContentSlider.style.width = maxsidesize + 'px';
        PositionSlideshowControls(id);
    }
    if (RunDebug)
    {
        div = document.createElement('div');
        div.setAttribute('id', 'divDEBUG' + id);
        div.style.position = 'absolute';
        div.style.color = '#ffffff';
        div.innerHTML = 'debug';
        div.style.zIndex = '9999';
        div.style.top = '0px';
        div.style.left = '0px';
        document.body.appendChild(div);
    }
}


function LoadSlideShowGalleryImages(doc)
{
    var sp = doc.split('|||');
    var id = sp[0];
    eval('SlideShowImages' + id + ' = new Array(' + sp[1] + ');');
    
    var div = document.getElementById('divSlideshowControls' + id)    
    div.innerHTML = BulidPagingControlsContent(id);
    PositionSlideshowControls(id)
}

function BulidPagingControlsContent(id)
{    
    SlideshowPreviousLink = doReplace(SlideshowPreviousLink, '%%jsImagePath%%', jsImagePath);
    SlideshowNextLink = doReplace(SlideshowNextLink, '%%jsImagePath%%', jsImagePath);
    SlideshowPlayLink = doReplace(SlideshowPlayLink, '%%jsImagePath%%', jsImagePath);
    SlideshowPauseLink = doReplace(SlideshowPauseLink, '%%jsImagePath%%', jsImagePath); 
       
    var arr = eval('SlideShowImages' + id);
    var items = arr.length;
    
    //Build the div content
    var content = '<table cellpadding="0" cellspacing="0" style="width:170px"><tr>'
    content += '<td style="background-image: url(' + jsImagePath + 'slideshow/bg.png); height:29px; width:170px">';
    content += '<table border="0" cellpadding="0" cellspacing="0" style="width:170px">';
    content += '<td id="clSlideshowPlay' + id + '" style="width:20px; text-align:left; padding-left:10px"><a href="javascript:SlideShowPlay(\'' + id + '\')">' + SlideshowPlayLink + '</a></td>';
    content += '<td style="width:auto; text-align:right;"><a href="javascript:SlideShowImageChange(\'' + id + '\', -1)">' + SlideshowPreviousLink + '</a></td>';
    content += '<td id="clSlideshowNumbers' + id + '" style="width:40px; text-align:center; white-space:nowrap" class="SlideShowPaging"><b>1</b>&nbsp;of&nbsp;<b>' + items + '</b></td>';
    content += '<td style="width:20px; text-align:right; padding-right:10px"><a href="javascript:SlideShowImageChange(\'' + id + '\', 1)">' + SlideshowNextLink + '</a></td>';
    content += '</tr></table></td></tr></table>';
    return content;
}

function SetDivContentLoading(id)
{
    var div = document.getElementById('divSlideshowControls' + id)    
    var content = '<table cellpadding="0" cellspacing="0" style="width:170px"><tr>';
    content += '<td>Loading</td>';
    content += '</tr></table>';
}

function SlideShowImageChange(id, dir, playing)
{
    var img = document.getElementById(id);
    if (!img) 
    {
        StopShow(id); 
        return;
    }
    
    if (!playing)
    { 
        if (SlideShowPause(id, true))
        {
            //Show was running and has now been paused
            //Need to do something if we were in the middle of loading an image
            
            //need to cancel the current fade in/out to allow the code below to work
            clearTimeout(eval('SlideShowFadeInstance' + id));
            clearTimeout(eval('SlideShowSlideInstance' + id));
        }
    }
    var arr = eval('SlideShowImages' + id);
    var maxsidesize = eval('SlideShowMaxSideSize' + id);
    var current = img.src;
    var sp = current.split('/getfile/');
    current = sp[1];
    sp = current.split('/');
    current = sp[0];
    var i = 0;
    while (arr[i] != current)
    {
        i++;
        if (i > arr.length)
        {
            alert('error');
            break;
        }
    }
    if (dir == 1)
    {
        if (i == (arr.length-1))
            i = 0;
        else
            i++;
    }
    else
    {
        if (i==0)
            i = arr.length-1;
        else
            i--;
    }
    
    eval('FadingDirectionSlideShow' + id + ' = -1;');
    document.getElementById('divSlideShowContentLoading' + id).style.backgroundImage = "url('" + eval('SlideShowLoadingImage' + id) + "')";
    FadeInNewSlideShowImage(id, arr[i], maxsidesize, i+1, arr.length, 100, 0);
}

function StopShow(id)
{
    clearInterval(eval('SlideShowPlayInstance' + id));
    clearTimeout(eval('SlideShowFadeInstance' + id));
    clearTimeout(eval('SlideShowSlideInstance' + id));
}

function FadeInNewSlideShowImage(id, img, maxsidesize, current, total, val, target)
{
    if (!document.getElementById(id)) 
    {
        StopShow(id); 
        return;
    }
    var FadingDirectionSlideShow = eval('FadingDirectionSlideShow' + id);
    if (val< 0) val = 0;
    
    SetOpacity(id, val);
        
    if ((val < target) && (FadingDirectionSlideShow == 1))
    {
        eval('SlideShowFadeInstance' + id + ' = setTimeout(\'FadeInNewSlideShowImage("' + id + '","' + img + '", ' + maxsidesize + ', ' + current + ', ' + total + ',  ' + (1*(val + 20)) + ', ' + target + ')\', FadeSpeedSlideShowImage);');
    }
    else if ((val > 0) && (FadingDirectionSlideShow == -1))
    {
        eval('SlideShowFadeInstance' + id + ' = setTimeout(\'FadeInNewSlideShowImage("' + id + '","' + img + '", ' + maxsidesize + ', ' + current + ', ' + total + ',  ' + (1*(val - 20)) + ', ' + target + ')\', FadeSpeedSlideShowImage);');
    }   
    else if ((val >= target) && (FadingDirectionSlideShow == 1))
    {
        //Image Faded in
        eval('FadingDirectionSlideShow' + id + ' = 0;');
        document.getElementById('divSlideShowContentLoading' + id).style.backgroundImage = '';
        
    }
    else if ((val == 0) && (FadingDirectionSlideShow == -1))
    {
        //Image faded out, set new image & values and start fade in
        eval('FadingDirectionSlideShow' + id + ' = 1;');
        
        document.getElementById('clSlideshowNumbers' + id).innerHTML = '<b>' + current + '</b>&nbsp;of&nbsp;<b>' + total + '</b>';
        var cntrl = document.getElementById(id);
        cntrl.src = '/getfile/' + img + '/image.aspx?MaxSideSize=' + maxsidesize;
        cntrl.onload = function () { PositionSlideshowControls(id, true); FadeInNewSlideShowImage(id, img, maxsidesize, current, total, 0, 100); };
    }
}


function SlideShowPlay(id)
{
    eval('SlideShowPlayInstance' + id + ' = setInterval("SlideShowImageChange(\'' + id + '\', 1, true)", SlideShowSpeed)');
    document.getElementById('clSlideshowPlay' + id).innerHTML = '<a href="javascript:SlideShowPause(\'' + id + '\')">' + SlideshowPauseLink + '</a>';
}

function SlideShowPause(id, needsReturn)
{
    var ret = false;
    try
    {
        clearInterval(eval('SlideShowPlayInstance' + id));
        ret = true;
    }
    catch (ex)
    {
        ret = false;
    }
    document.getElementById('clSlideshowPlay' + id).innerHTML = '<a href="javascript:SlideShowPlay(\'' + id + '\')">' + SlideshowPlayLink + '</a>';
    if (needsReturn) return ret;
}

function ControlMoveOver(id)
{
    var FadingDirectionControls = eval('FadingDirectionControls' + id);
    
    if (RunDebug)
    {
        var debug = document.getElementById('divDEBUG' + id);
        debug.innerHTML += '<br>OverControl' + FadingDirectionControls;
    }
    
    if (FadingDirectionControls == -1)
    {
        clearTimeout(eval('ControlFadeInstance' + id));
        eval('FadingDirectionControls' + id + ' = 0');
        SetOpacity('divSlideshowControls' + id, 100);
        if (RunDebug) debug.innerHTML += '<br>OverControlClearedFade';
    }
    
    if (RunDebug) debug.innerHTML += '<br>OverControl' + eval('FadingDirectionControls' + id);
}

function SlideShowImageOver(id)
{
    if (RunDebug)
    {
        var debug = document.getElementById('divDEBUG' + id);
        debug.innerHTML += '<br>Over';
    }
    
    var cntrl = document.getElementById(id);
    var div = document.getElementById('divSlideshowControls' + id);
    
    var FadingDirectionControls = eval('FadingDirectionControls' + id);
    
    if (RunDebug)
    {
        debug.innerHTML += '<br>Direction' + FadingDirectionControls;
        debug.innerHTML += '<br>visibility' + div.style.visibility;
    }
    
    if ((div.style.visibility == 'visible') && (FadingDirectionControls == 0)) return; //Already visible, so must have come from control so leave
    
    if (RunDebug) debug.innerHTML += '<br>fadein';
    
    eval('FadingDirectionControls' + id + ' = 1');
    FadeInOutControls(id, 0, 100)
}

function PositionSlideshowControls(id, doSlide)
{    
    if (doSlide)
    {
        //Need to slide the slider to the correct height
        var Target = document.getElementById(id).offsetHeight;
        var slider = document.getElementById('divSlideShowContentSlider' + id);
        var current = slider.style.height.substr(0, slider.style.height.length-2)*1;
        var direction = 0;
        if (current > Target) direction = -1;
        if (current < Target) direction = 1;
        var difference = (current - Target) * direction

        //Check we are starting from a position divisble by slider step
        var steps = (((difference/WidgetSliderStep)^2)^0.5) + '';
        var bits = steps.split('.');

        if (bits.length > 1)
        {
            var intbit = bits[0];
            if (direction == -1)
                slider.style.height = ((intbit*1) * SlideShowSliderStep) + 'px';
            else
                slider.style.height = ((intbit+1) * SlideShowSliderStep) + 'px';
        }
        eval('SlideShowSlideInstance' + id + ' =  setTimeout(\'SlideSlideShow("' + id + '", ' + Target + ', ' + direction + ');\', SlideShowSliderSpeed);');
    }
    else
    {
        var pos = getElementPosition(id);
        var top = pos.top;
        var left = pos.left;
        var height = document.getElementById(id).offsetHeight;
        var width = document.getElementById(id).offsetWidth;
        var div = document.getElementById('divSlideshowControls' + id);
        top += height - 50;
        left += ((width-div.offsetWidth)/2)
        div.style.top = top + 'px';
        div.style.left = left + 'px';
    }
}

function SlideSlideShow(id, Target, direction)
{
    var FirstLoad = eval('SlideShowItemFirstLoad' + id);
    var doMore = true;
    var slider = document.getElementById('divSlideShowContentSlider' + id);
    if (!slider)
    {
        StopShow(id); 
        return;
    }
    var current = slider.style.height.substr(0, slider.style.height.length-2);
    
    var SetTo = ((1*current)+(direction*SlideShowSliderStep))
    
    if (((SetTo > Target) && (direction == 1)) || ((SetTo < Target) && (direction == -1)))
    {
        SetTo = Target;
        doMore = false
    }
    
    if (FirstLoad)
    {
        eval('SlideShowItemFirstLoad' + id + '=false;');
        SetTo = Target;
    }
    
    var added = SetTo - current;
    var div = document.getElementById('divSlideshowControls' + id);
    var cntrlcurrent = div.style.top.substr(0, div.style.top.length-2);
    div.style.top = ((cntrlcurrent*1) + (added*1)) + 'px';
    slider.style.height = SetTo + 'px';
    
    if (doMore)
        eval('SlideShowSlideInstance' + id + ' = setTimeout(\'SlideSlideShow("' + id + '", ' + Target + ', ' + direction + ');\', SlideShowSliderSpeed);');
}

function SlideShowImageOut(id)
{
    if (RunDebug)
    {
        var debug = document.getElementById('divDEBUG' + id);
        debug.innerHTML += '<br>Out';
    }
    eval('FadingDirectionControls' + id + ' = -1');
    FadeInOutControls(id, 100, 100)
}

function FadeInOutControls(id, val, target)
{
    var FadingDirectionControls = eval('FadingDirectionControls' + id); 
    if (FadingDirectionControls == 0) return;
    document.getElementById('divSlideshowControls' + id).style.visibility = 'visible'
    if (val< 0) val = 0;
    var debug = document.getElementById('divDEBUG' + id);

    SetOpacity('divSlideshowControls' + id, val);
    if (RunDebug)
    {
        var debug = document.getElementById('divDEBUG' + id);
        debug.innerHTML += '<br>FADING' + FadingDirectionControls;
    }
    
    if ((val < target) && (FadingDirectionControls == 1))
    {
        eval('ControlFadeInstance' + id + ' = setTimeout("FadeInOutControls(\'' + id + '\', ' + (1*(val + 20)) + ', ' + target + ')", FadeSpeedControls)');
    }
    else if ((val > 0) && (FadingDirectionControls == -1))
    {
        eval('ControlFadeInstance' + id + ' = setTimeout("FadeInOutControls(\'' + id + '\', ' + (1*(val - 20)) + ', ' + target + ')", FadeSpeedControls)');
    }   
    else if ((val >= target) && (FadingDirectionControls == 1))
    {
        eval('FadingDirectionControls' + id + ' = 0');
    }
    else if ((val == 0) && (FadingDirectionControls == -1))
    {
        eval('FadingDirectionControls' + id + ' = 0');
        document.getElementById('divSlideshowControls' + id).style.visibility = 'hidden'
    }
}