var jsonurl = "../JSON-RPC";
var jsonrpc = null;
var currentPage = 1;
var firstIndex;
var lastIndex;
var numPages;
var numGalleries;
var galleries;
var currentGallery;
var currentGalleryId;
var currentPhotoIndex = 0;
var timeout;
var continuePaging = 1;
var playTimeoutLength = 10000;
var photoPageSize = 10;
var currentFirstPhotoPage = 1;
var preselect = null;

function initJSON() {
    try {
        if (jsonrpc == null) {
            jsonrpc = new JSONRpcClient(jsonurl);
        }
    } catch(e) {
        alert(e);
    }
}

function initPhotoGalleries() {
    initJSON();
    if (preselect != null){
    }
    update();
    if (galleries && galleries.length > 0) {
        selectGallery(galleries[0].id, true);
        if (preselect != null)
            selectGallery(preselect);
        }
}

function update() {
    fetchGalleries();
    addGalleriesToTable();
    updateLabelsAndPageLinks();
}

function nextPage() {
    if (currentPage < numPages) {
        currentPage++;
        update();
    } else {
        //error state. or move to next channel?
    }
}

function previousPage() {
    if (currentPage > 1) {
        currentPage--;
        update();
    } else {
        //error state. or move to previous channel?
    }
}

function fetchGalleries() {
    var response = jsonrpc.tourPhotoGalleryRPC.getGalleries(currentPage);
    currentPage = response.currentPage;
    firstIndex = response.firstIndex;
    lastIndex = response.lastIndex;
    numPages = response.numPages;
    numGalleries = response.numGalleries;
    galleries = response.galleries;
}

function clearGalleryTable() {
    var table = document.getElementById("VideoGalleryTable");
    var len = table.rows.length;
    for (var i = len - 1; i >= 0; i--) {
        table.deleteRow(i);
    }
}

function addGalleriesToTable() {
    var rowIndex = 0;
    var colIndex = 0;
    var table = document.getElementById("VideoGalleryTable");
    var row;
    var cell;
    clearGalleryTable();
    var i;
    for (i = 0; i < galleries.length; i++) {
        if (i % 5 == 0) {
            row = table.insertRow(rowIndex);
            colIndex = 0;
            rowIndex++;
        }
        cell = row.insertCell(colIndex);
        colIndex++;
        cell.innerHTML = cellHtmlForGallery(galleries[i]);
        cell.id = "gallery" + galleries[i].id;
        cell.style.width = "20%";
        if (currentGalleryId == galleries[i].id) {
            cell.className = "MediaThumbnailActive";
        } else {
            cell.className = "MediaThumbnail";
        }
    }
    while (i % 5 != 0) {
        cell = row.insertCell(colIndex);
        cell.style.width = "20%";
        colIndex++;
        i++;
    }
}

function cellHtmlForGallery(gallery) {
    return "<a href=\"javascript:selectGallery(" + gallery.id + ")\" onclick=\"javascript:photoGalleryClick(\'"+gallery.name+"\',\'"+gallery.thumbnailURL+"\')\"><img src=\"" + gallery.thumbnailURL + "\" border=\"0\" alt=\"" + gallery.name + "\"></a><br><a href=\"javascript:selectGallery(" + gallery.id + ")\" onclick=\"javascript:photoGalleryClick(\'"+gallery.name+"\',\'"+gallery.thumbnailURL+"\')\">" + gallery.name + "</a>";
}

function updateLabelsAndPageLinks() {
    //fix the paging links and index display.
    var txt = "";
    if (currentPage > 1) {
        txt = txt + "<a href=\"javascript:previousPage()\"><img src=\"http://wai.redskins.com/images/PagingLeftArrow.gif\" align=\"absmiddle\" border=\"0\" alt=\"Previous Page\"></a>";
    }
    if (numGalleries > 0) {
        txt = txt + " " + firstIndex + "-" + lastIndex + " of " + numGalleries + " Galleries";
    } else {
        txt = "No galleries found.";
    }
    if (currentPage < numPages) {
        txt = txt + "<a href=\"javascript:nextPage()\"><img src=\"http://wai.redskins.com/images/PagingRightArrow.gif\" align=\"absmiddle\" border=\"0\" alt=\"Next Page\"></a>";
    }
    document.getElementById("MediaPagingTop").innerHTML = txt;
    document.getElementById("MediaPagingBottom").innerHTML = txt;
}

function selectGallery(id, stopped) {
    if (currentGalleryId > 0 && document.getElementById("gallery" + currentGalleryId)) {
        document.getElementById("gallery" + currentGalleryId).className = "MediaThumbnail";
    }
    currentGalleryId = id;
    currentGallery = null;

    for (var i = 0; i < galleries.length; i++) {
        if (galleries[i].id == id) {
            currentGallery = galleries[i];
            break;
        }
    }

    if (currentGallery) {
        document.getElementById("gallery" + currentGalleryId).className = "MediaThumbnailActive";
        displayGallery();
    }
}

function displayGallery() {
    currentPhotoIndex = 0;
    pause();
    var detail = document.getElementById('Photo');
    detail.innerHTML = '<div id="photo0" style="display:none; vertical-align:middle;"><a href="' + currentGallery.photoGalleryPhotos[0].photoFullURL +'" rel="lightbox" title="' + currentGallery.photoGalleryPhotos[0].name + '" onmousedown="pause();"><img src="' + currentGallery.photoGalleryPhotos[0].photoURL + '" style="border:0px;" id="thePhoto" onload="doPad()"/></a></div>';
    initLightbox();
    var name = document.getElementById("PhotoName");
    name.innerHTML = currentGallery.photoGalleryPhotos[0].name;
    updatePaging();
    Effect.Appear("photo" + currentPhotoIndex);
    timeout = setTimeout("autoCycle()", playTimeoutLength);
    continuePaging = 1;
    var controls = document.getElementById("Controls");
    controls.innerHTML = '<a href="javascript:pause()" style="color:#FFFFFF;">Pause</a>';
    currentFirstPhotoPage = 1;

}

function updatePaging() {
    var paging = document.getElementById("Paging");
    var pagingStr = '<a href="javascript:selectPreviousPhoto()"><img align="absmiddle" src="http://wai.redskins.com/images/leftarrowsmall.jpg" style="border:0"/></a>';

    if (currentGallery.photoGalleryPhotos.length > photoPageSize) {
        if (currentPhotoIndex + 1 < currentFirstPhotoPage + 4 && currentPhotoIndex+2 != currentGallery.photoGalleryPhotos.length) {
            currentFirstPhotoPage = currentPhotoIndex - 1;
            if (currentFirstPhotoPage < 1)
                currentFirstPhotoPage = 1;
        } else if (currentPhotoIndex + 1 > (currentFirstPhotoPage + photoPageSize - 3) && currentPhotoIndex < currentGallery.photoGalleryPhotos.length) {
            currentFirstPhotoPage = currentPhotoIndex + 4 - photoPageSize;
            if (currentFirstPhotoPage >= (currentGallery.photoGalleryPhotos.length - photoPageSize + 1))
                currentFirstPhotoPage = currentGallery.photoGalleryPhotos.length - photoPageSize + 1
        }
    }

    for (var i = currentFirstPhotoPage - 1; i < currentGallery.photoGalleryPhotos.length && i < currentFirstPhotoPage + photoPageSize - 1; i++) {
        if (i != currentPhotoIndex)
            pagingStr = pagingStr + ' <a href="javascript:manualSelect(' + i + ')" style="color:#FF9900;">' + Number(i + 1) + '</a>';
        else
            pagingStr = pagingStr + ' <a href="javascript:manualSelect(' + i + ')" style="color:#FFFFFF;">' + Number(i + 1) + '</a>';
    }
    pagingStr = pagingStr + ' <a href="javascript:selectNextPhoto()" style="color:#FFFFFF;"><img align="absmiddle" src="http://wai.redskins.com/images/rightarrowsmall.jpg" style="border:0"/></a>';
    paging.innerHTML = pagingStr;
}

function manualSelect(newIndex) {
    pause();
    selectPhotoIndex(newIndex);
}

function selectPhotoIndex(newIndex) {
    Effect.Fade("photo" + currentPhotoIndex, { to: .01 });
    setTimeout("showPhoto(" + newIndex + ")", 1000);

}

function showPhoto(newIndex) {
    currentPhotoIndex = newIndex;

    var detail = document.getElementById('Photo');
    detail.innerHTML = '<div id="photo' + newIndex + '" style="display:none;"><a href="' + currentGallery.photoGalleryPhotos[newIndex].photoFullURL +'" rel="lightbox" title="' + currentGallery.photoGalleryPhotos[newIndex].name + '" onmousedown="pause();"><img id="thePhoto" src="' + currentGallery.photoGalleryPhotos[newIndex].photoURL + '" style="border:0px;" onload="doPad()"/></a></div>';
    initLightbox();
    var name = document.getElementById("PhotoName");
    name.innerHTML = currentGallery.photoGalleryPhotos[newIndex].name;
    updatePaging();
    Effect.Appear("photo" + newIndex);

}

function doPad(){
    /*
    var img = document.getElementById("thePhoto");
    var image = new Image;
    image.src = img.src;
    var div = document.getElementById("Photo");
    var divHeight = div.style.height;
    divHeight = divHeight.substr(0, divHeight.length-2)

    if(image.height < divHeight){
        img.style.marginTop = (divHeight- image.height)/2 + "px";
    } else if(image.height > divHeight) {
        img.height = divHeight;
    }
    */
}

function selectPreviousPhoto() {
    pause();
    var newIndex = currentPhotoIndex - 1;
    if (newIndex < 0)
        newIndex = currentGallery.photoGalleryPhotos.length - 1;

    selectPhotoIndex(newIndex);
}

function selectNextPhoto() {
    pause();
    advance();
}

function advance() {
    var newIndex = currentPhotoIndex + 1;
    if (newIndex >= currentGallery.photoGalleryPhotos.length)
        newIndex = 0;

    selectPhotoIndex(newIndex);
}

function autoCycle() {
    if (continuePaging == 1) {
        advance();
        timeout = setTimeout("autoCycle()", playTimeoutLength);
    }
}

function pause() {
    if (timeout) {
        clearTimeout(timeout)
        continuePaging = 0;
        var controls = document.getElementById("Controls");
        controls.innerHTML = '<a href="javascript:play()" style="color:#FFFFFF;">Play</a>';
    }
}

function play() {
    continuePaging = 1;
    autoCycle();
    var controls = document.getElementById("Controls");
    controls.innerHTML = '<a href="javascript:pause()" style="color:#FFFFFF;">Pause</a>';
}