﻿
//
// Thumb container
//

Type.registerNamespace('PhotoSite');

PhotoSite.ThumbItem = function(obj, imageUrl, name, details)
{
    this._obj = obj;
    this._imageUrl = imageUrl;
    this._name = name;
    this._details = details;
};

PhotoSite.ThumbItem.prototype = {

    _obj: null,
    _imageUrl: null,
    _name: null,
    _details: null,

    _domOuterContainer: null,
    _domInnerContainer: null,
    _domLinkContainer: null,
    _domImage: null,
    _domInput: null,
    _domName: null,
    _domDetail: null,
    _domEmpty: null,

    getObjectRef: function() {
        return this._obj;
    },

    clear: function() {
        this._domOuterContainer = this._domInnerContainer = this._domImage = this._domLink = this._domName = this._domDetail = this._domEmpty = null;
    },

    hide: function() {
        this.deSelect();
        this._domOuterContainer.style.display = 'none';
    },

    update: function(imageUrl, name, details) {
        this._name = name;
        this._details = details;
        this._imageUrl = imageUrl;

        if (imageUrl && imageUrl.length > 0) {
            if (this._domImage === null) {
                this._domImage = document.createElement('img');
                this._domImage.src = this._imageUrl;

                this._domInnerContainer.removeChild(this._domEmpty);
                this._domInnerContainer.appendChild(this._domImage);

                this._domEmpty = null;
            }
            else {
                this._domImage.src = imageUrl;
            }
        }

        this._domName.nodeValue = name;

        if (this._domDetail !== null) {
            this._domLinkContainer.removeChild(this._domDetail);
        }

        this._appendDetailsInfo();
    },

    _appendDetailsInfo: function() {
        if (typeof (this._details) !== 'undefined' && this._details != null) {
            this._domDetail = document.createElement('span');
            this._domDetail.className = 'blue';
            this._domDetail.innerHTML = '(' + this._details + ')';
            this._domLinkContainer.appendChild(document.createTextNode(' '));
            this._domLinkContainer.appendChild(this._domDetail);
        }
    },

    render: function(outerClassName, innerClassName, linkClassName, inputType, onClickCallback, emptyClassName, emptyText) {
        if (this._domOuterContainer !== null) {
            return this._domOuterContainer;
        }

        this._domOuterContainer = document.createElement('div');
        this._domInnerContainer = document.createElement('div');
        this._domLinkContainer = document.createElement('div');

        if (this._imageUrl && this._imageUrl.length > 0) {
            this._domImage = document.createElement('img');
            this._domImage.src = this._imageUrl;
        }
        else {
            this._domEmpty = document.createElement('div');
            this._domEmpty.className = emptyClassName;
        }

        this._domOuterContainer.className = outerClassName;
        this._domInnerContainer.className = innerClassName;
        this._domLinkContainer.className = linkClassName;

        if (typeof (inputType) !== 'undefined' && inputType !== null) {
            if (inputType == 'radio') {
                try {
                    this._domInput = document.createElement('<input type="radio" name="' + outerClassName + '_radio_name" />');
                }
                catch (err) {
                    this._domInput = document.createElement('input');
                }
                this._domInput.setAttribute('type', 'radio');
                this._domInput.setAttribute('name', outerClassName + '_radio_name');
            }
            else {
                this._domInput = document.createElement('input');
                this._domInput.type = inputType;
            }

            this._domLinkContainer.appendChild(this._domInput);
            this._domLinkContainer.appendChild(document.createTextNode(' '));
        }
        if (this._name.length > 14) {
            this._name = this._name.substring(0, 14) +'...';
        } 
        this._domName = document.createTextNode(this._name);
        this._domLinkContainer.appendChild(this._domName);
        this._appendDetailsInfo();

        if (this._domImage) {
            if (onClickCallback) {
                var anchor = document.createElement('a');
                anchor.href = '#';
                anchor.obj = this.getObjectRef();
                anchor.onclick = function() { onClickCallback(this.obj); return false; };
                anchor.appendChild(this._domImage);
                this._domInnerContainer.appendChild(anchor);
            }
            else {
                this._domInnerContainer.appendChild(this._domImage);
            }
        }
        else {
            var p = document.createElement('p');

            if (onClickCallback) {
                var anchor = document.createElement('a');
                anchor.href = '#';
                anchor.obj = this.getObjectRef();
                anchor.onclick = function() { onClickCallback(this.obj); return false; };
                anchor.innerHTML = emptyText;
                p.appendChild(anchor);
            }
            else {
                p.innerHTML = emptyText;
            }

            this._domEmpty.appendChild(p);
            this._domInnerContainer.appendChild(this._domEmpty);
        }

        this._domOuterContainer.appendChild(this._domInnerContainer);
        this._domOuterContainer.appendChild(this._domLinkContainer);

        return this._domOuterContainer;
    },

    select: function() {
        if (this._domInput) {
            this._domInput.checked = true;
        }
    },

    deSelect: function() {
        if (this._domInput) {
            this._domInput.checked = false;
        }
    },

    selected: function() {
        return this._domInput ? this._domInput.checked : false;
    }
};

PhotoSite.ThumbContainer = function(id)
{
    this._id = id;
    this._items = [];
    this._containerClassNames = [null, null, null];
};

PhotoSite.ThumbContainer.prototype = {

    _id: null,
    _items: null,
    _sizeIndex: 0,
    _thumbInputTypeName:  null,
    _thumbLinkClassName:  null,
    _thumbOuterClassName: null,
    _thumbInnerClassName: null,
    _containerClassNames: null,
    _thumbOnClickCallback: null,
    _thumbEmptyClassName: null,
    _thumbEmptyText: null,

    _getDomElement: function(name)
    {
        return document.getElementById(this._id + '_dom' + name);
    },

    _showDomElement: function(name)
    {
        this._getDomElement(name).style.display = '';
    },

    _hideDomElement: function(name)
    {
        this._getDomElement(name).style.display = 'none';
    },

    setupSortOptions: function(sortOptions)
    {
        if (typeof(sortOptions) !== 'undefined' && sortOptions !== null)
        {
            var select = this._getDomElement('SortDropDown');
            
            RemoveAllChildNodes(select);

            for (var i = 0; i < sortOptions.length; i++)
            {
                var option = document.createElement('option');
                option.innerHTML = sortOptions[i].Name;
                option.value = sortOptions[i].Value;
                select.appendChild(option);
            }
            
            select.onchange = Function.createDelegate(this, this.sort);
            
            this._showDomElement('SortContainer');
        }
        else
        {
            this._hideDomElement('SortContainer');
        }
    },

    setupLinkObjects: function(linkObjects)
    {
        if (typeof(linkObjects) !== 'undefined' && linkObjects !== null)
        {
            var container = this._getDomElement('LinkObjects');

            RemoveAllChildNodes(container);

            for (var i = 0; i < linkObjects.length; i++)
            {
                var linkObj = linkObjects[i];
                var callback = linkObj.Callback;
                
                var anchor = document.createElement('a');
                var strong = document.createElement('strong');
                
                anchor.href = '#';
                anchor.obj = linkObj;
                anchor.onclick = function() { this.obj.Callback(); return false; };
                strong.innerHTML = linkObj.Text;
                anchor.appendChild(strong);
                anchor.style.marginLeft = '8px';
                
                container.appendChild(anchor);
            }
        }
        else
        {
            this._getDomElement('LinkObjects').innerHTML = '';
        }
    },

    setupControlButtons: function(controlButtons)
    {
        if (typeof(controlButtons) !== 'undefined' && controlButtons !== null)
        {
            var container = this._getDomElement('ControlButtons');

            RemoveAllChildNodes(container);
            
            for (var i = 0; i < controlButtons.length; i++)
            {
                var controlBtn = controlButtons[i];
                var buttonImg = document.createElement('img');
                
                buttonImg.src = controlBtn.Image;
                buttonImg.onclick = controlBtn.Callback;
                buttonImg.style.cursor = 'pointer';
                
                container.appendChild(buttonImg);
                container.appendChild(document.createTextNode(' '));
            }
            
            this._showDomElement('ControlButtonContainer');
            this._getDomElement('Scrollbox').style.marginTop = '0px';
            this._getDomElement('Scrollbox').style.marginBottom = '0px';
        }
        else
        {
            this._hideDomElement('ControlButtonContainer');
            this._getDomElement('Scrollbox').style.marginTop = '15px';
            this._getDomElement('Scrollbox').style.marginBottom = '30px';
        }
    },

    setup: function(title, showSizeOptions, showSelectAll, sortOptions, linkObjects, controlButtons)
    {
        this.clear();
        this._getDomElement('Scrollbox').scrollTop = 0;
        this._getDomElement('Title').innerHTML = title;
        this._getDomElement('ResizeOptions').style.display = showSizeOptions ? '' : 'none';
        this._getDomElement('SelectContainer').style.display = showSelectAll ? '' : 'none';
        
        this.setupSortOptions(sortOptions);
        this.setupLinkObjects(linkObjects);
        this.setupControlButtons(controlButtons);
        
        this.setThumbSizeIndex(0);
    },

    setTitle: function(title)
    {
        this._getDomElement('Title').innerHTML = title;
    },
    
    selectAll: function()
    {
        for (var i = 0; i < this._items.length; i++)
        {
            this._items[i].select();
        }
    },
    
    deSelectAll: function()
    {
        for (var i = 0; i < this._items.length; i++)
        {
            this._items[i].deSelect();
        }
    },
    
    add: function(obj, imageUrl, name, details)
    {
        this._items.push(new PhotoSite.ThumbItem(obj, imageUrl, name, details));
    },
    
    update: function(obj, imageUrl, name, details)
    {
        for (var i = 0; i < this._items.length; i++)
        {
            if (this._items[i].getObjectRef() == obj)
            {
                this._items[i].update(imageUrl, name, details);
                break;
            }
        }
    },
    
    _getSpecificItems: function(itemTestCallback)
    {
        var result = new Array;
        
        for (var i = 0; i < this._items.length; i++)
        {
            if (itemTestCallback(this._items[i]))
            {
                result.push(this._items[i].getObjectRef());
            }
        }
        
        return result;
    },
    
    getItems: function()
    {
        return this._getSpecificItems(function(p){return true;});
    },
    
    getSelectedItem: function()
    {
        return this.getSelectedItems()[0];
    },
    
    getSelectedItems: function()
    {
        return this._getSpecificItems(function(p){return p.selected();});
    },
    
    getSelectedItemsSingleProperty: function(propName)
    {
        var items = this.getSelectedItems();
        var result = new Array;
        
        for (var i = 0; i < items.length; i++)
        {
            result.push(items[i][propName]);
        }
        
        return result;
    },
    
    remove: function(obj)
    {
        for (var i = 0; i < this._items.length; i++)
        {
            if (this._items[i].getObjectRef() == obj)
            {
                this._items[i].hide();
                Array.removeAt(this._items, i);
                break;
            }
        }
    },
    
    clear: function()
    {
        this._items.length = 0;
    },
    
    render: function()
    {
        var content = this._getDomElement('Content');
        
        RemoveAllChildNodes(content);
        
        content.className = this._containerClassNames[this._sizeIndex];
        
        for (var i = 0; i < this._items.length; i++)
        {
            var item = this._items[i].render(this._thumbOuterClassName, this._thumbInnerClassName, this._thumbLinkClassName, this._thumbInputTypeName, this._thumbOnClickCallback, this._thumbEmptyClassName, this._thumbEmptyText);
            content.appendChild(item);
        }
    },
    
    sort: function()
    {
        var sortBy = this._getDomElement('SortDropDown').value;
        RadixSort.sortByKeyCallback(this._items, function(p) { return p.getObjectRef()[sortBy]; }, (sortBy == "DateCreated"));
        this.render();
    },
    
    setThumbSizeIndex: function(index)
    {
        this._sizeIndex = index;
        this._getDomElement('Content').className = this._containerClassNames[this._sizeIndex];
        
        for (var i = 0; i < 3; i++)
        {
            var btn = this._getDomElement('ThumbSizeButton' + i);
            var src = btn.src;
            
            src = src.replace('_on.gif', '.gif');
            
            if (i == index)
            {
                src = src.replace('.gif', '_on.gif');
            }
            
            btn.src = src;
        }
    },
    
    setContainerClasses: function(large, medium, small)
    {
        this._containerClassNames[0] = large;
        this._containerClassNames[1] = medium;
        this._containerClassNames[2] = small;
    },
    
    setThumbOuterClass: function(className)
    {
        this._thumbOuterClassName = className;
    },
    
    setThumbInnerClass: function(className)
    {
        this._thumbInnerClassName = className;
    },
    
    setThumbLinkClass: function(className)
    {
        this._thumbLinkClassName = className;
    },
    
    setThumbInputTypeName: function(typeName)
    {
        this._thumbInputTypeName = typeName;
    },
    
    setThumbOnClickCallback: function(callbackFunction)
    {
        this._thumbOnClickCallback = callbackFunction;
    },
    
    setThumbEmptyClassName: function(className)
    {
        this._thumbEmptyClassName = className;
    },
    
    setThumbEmptyText: function(text)
    {
        this._thumbEmptyText = text;
    }

};

//
// Page functionality...
//

var displayType = null;
var mediaCache = {};
var albumService = null;
var currentAlbum = null;

function getAlbumService()
{
    if (albumService === null)
    {
        albumService = new IAlbumService();
    }
    return albumService;
}

function onTabChanged(name)
{
    if (name == 'albums')
    {
        displayAlbums('Upload');
    }
    else if (name == 'projects')
    {
        displayProjects('PhotoBook');
    }
    else if (name == 'documents')
    {
        displayDocuments();
    }
}

function onSectionChanged(section)
{
    switch (section.getID())
    {
    case 'AlbumUpload':
        displayAlbums('Upload');
        break;
    case 'AlbumShared':
        displayAlbums('Share');
        break;
    case 'AlbumFriend':
        displayAlbums('Friend');
        break;
    case 'PhotoBooks':
        displayProjects('PhotoBook');
        break;
    case 'Calendars':
        displayProjects('Calendar');
        break;
    case 'SharedPhotoBooks':
        displayProjects('SharedPhotoBook');
        break;
    }
}

function onAlbumClick(album)
{
    if (album.NoOfMedia == 0)
    {
        location.href = '../upload/upload.aspx?a=' + album.ID;
    }
    else
    {
        onAlbumChanged(album);
    }
}

function onAlbumChanged(album)
{   
    if (mediaCache[album.ID])
    {
        displayAlbumMedia(album);
    }
    else if (album.NoOfMedia > 0)
    {
        showLoadingPopupDelayed();
        getAlbumService().GetAlbumMedia2(album.ID, onGotAlbumMedia, gotError, album);
    }
    else
    {
        mediaCache[album.ID] = new Array;
        displayAlbumMedia(album);
    }
    currentAlbum = album;
}

function onGotAlbumMedia(result, ctx)
{
    mediaCache[ctx.ID] = result;
    displayAlbumMedia(ctx);
    hideLoadingPopup();
}

function onMediaClick(media)
{
    location.href = 'prints_preview.aspx?m=' + media.ID;
}

function sharePrints()
{
    var prints = ThumbHolder.getSelectedItems();
    
    if (prints.length === 0)
    {
        msgBox.Show(SR.Share, SR.CollagePopUpSelectPhotos, [{ Button: 'Ok'}]);
        return;
    }
    else
    {
        showLoadingPopup();
        getAlbumService().ShareImages(ThumbHolder.getSelectedItemsSingleProperty('ID'), sharePrints_Callback, gotError);
    }
}

function sharePrints_Callback(result)
{
    location.href = '../share/generate_share.aspx?q=' + result;
}

function orderPrints()
{
    var prints = ThumbHolder.getSelectedItems();
    
    if (prints.length === 0)
    {
        msgBox.Show(SR.OrderPrints, SR.CollagePopUpSelectPhotos, [{ Button: 'Ok'}]);
        return;
    }
    else
    {
        showAddToCartConfirmation();
    }
}

function showAddToCartConfirmation()
{
    msgBox.Show(SR.AddToCartConfirmationConfirmation, SR.AddTheSelectedPrintsToTheCart,
        [{ Button: 'AddToCart', Callback: function() { _albumOrderPrints(false); } },
         { Button: 'Cancel' },
         { Button: 'AddAndGoToCart', Callback: function() { _albumOrderPrints(true); } }
        ]);
}

function printSlideshow() {
    var prints = ThumbHolder.getSelectedItems();
    //    currentAlbum.NoOfMedia -= prints.length;
    //    if (currentAlbum.NoOfMedia == 0)
    if (prints.length == 0) {
        //        msgBox.Show(SR.SlideShow, SR.ThereisnophotointheSelectedAlbum, [{ Button: 'Ok', Callback: _defaultPage}]);
        msgBox.Show(SR.SlideShow, SR.CollagePopUpSelectPhotos, [{ Button: 'Ok', Callback: null}]);
        return;
    }
    location.href = 'slideshow_preview.aspx?q=' + currentAlbum.ID;
}

function _defaultPage() {
    location.href = 'default.aspx';
}
function copyPrints()
{
    var prints = ThumbHolder.getSelectedItems();
    
    if (prints.length === 0)
    {
        msgBox.Show(SR.Copy, SR.SelectImageToCopyHere, [{ Button: 'Ok'}]);
        return;
    }
    else
    {
        populateCopyPopup();
        PopupCopy.show();
    }
}

function movePrints()
{
    var prints = ThumbHolder.getSelectedItems();
    
    if (prints.length === 0)
    {
        msgBox.Show(SR.Move, SR.PrintsToBeMovedPopup, [{ Button: 'Ok'}]);
    }
    else
    {
        populateMovePopup();
        PopupMoveMedia.show();
    }
}

function movePrintsConfirm()
{
    var albumID = getSelectedAlbumToCopyTo();
    
    if (albumID === null)
    {
        return;
    }
    
    var target = TabsPanel.getAlbumByID(albumID);
    
    if (target == null)
    {
        return;
    }
    
    var prints = ThumbHolder.getSelectedItems();
    var printIDs = ThumbHolder.getSelectedItemsSingleProperty('ID');
    
    if (mediaCache[albumID])
    {
        for (var i = 0; i < prints.length; i++)
        {
            mediaCache[albumID].push(prints[i]);
        }
    }
    
    target.NoOfMedia += prints.length;
    currentAlbum.NoOfMedia -= prints.length;
    
    if (target.ThumbUrl.length == 0)
    {
        target.ThumbUrl = prints[0].ThumbUrl;
    }
    
    for (var i = 0; i < prints.length; i++)
    {
        Array.remove(mediaCache[currentAlbum.ID], prints[i]);
    }
    
    displayAlbumMedia(currentAlbum);
    
    getAlbumService().MovePrintstoAlbum(printIDs, albumID, gotSuccess, gotError);
    
    PopupMoveMedia.hide();
}

function removePrints()
{
    var prints = ThumbHolder.getSelectedItems();
    
    if (prints.length == 0)
    {
        msgBox.Show(SR.Remove, SR.SelectPrintsToBeRemove, [{ Button: 'Ok'}]);
        return;
    }
    else
    {
        PopupRemovePrints.show();
    }
}

function removePrintsConfirm()
{
    var prints = ThumbHolder.getSelectedItems();
    var printIDs = ThumbHolder.getSelectedItemsSingleProperty('ID');
    
    for (var i = 0; i < prints.length; i++)
    {
        Array.remove(mediaCache[currentAlbum.ID], prints[i]);
    }
    
    currentAlbum.NoOfMedia -= prints.length;
    
    if (mediaCache[currentAlbum.ID].length > 0)
    {
        currentAlbum.ThumbUrl = mediaCache[currentAlbum.ID][0].ThumbUrl;
    }
    else
    {
        currentAlbum.ThumbUrl = '';
    }
    
    getAlbumService().RemovePrints(printIDs, gotSuccess, gotError);
    
    displayAlbumMedia(currentAlbum);
    
    PopupRemovePrints.hide();
}

function displayAlbumMedia(album)
{
    var albumID = album.ID;
    
    if (displayType != 'Print')
    {
        ThumbHolder.setup(album.Name, true, true, null,
            [
                { Text: SR.Copy, Callback: copyPrints }, { Text: SR.Move, Callback: movePrints }, { Text: SR.Remove, Callback: removePrints }
            ],
            [
                { Image: '../images/btns/btn_share_images' + SR.LanguageSuffix + '.gif', Callback: sharePrints },
                { Image: '../images/btns/btn_order_prints' + SR.LanguageSuffix + '.gif', Callback: orderPrints },
                { Image: '../images/btns/btn_slideshow' + SR.LanguageSuffix + '.gif', Callback: printSlideshow }
            ]);

        ThumbHolder.setContainerClasses('print');
        
        ThumbHolder.setThumbOuterClass('print');
        ThumbHolder.setThumbInnerClass('print_thumb');
        ThumbHolder.setThumbLinkClass('print_link');
        ThumbHolder.setThumbInputTypeName('checkbox');
        ThumbHolder.setContainerClasses('albums_listing', 'albums_listing_med', 'albums_listing_sm');
        
        ThumbHolder.setThumbOnClickCallback(onMediaClick);
    }
    else
    {
        ThumbHolder.clear();
        ThumbHolder.setTitle(album.Name);
    }

    var medias = mediaCache[albumID];

    for (var i = 0; i < medias.length; i++)
    {
        ThumbHolder.add(medias[i], medias[i].ThumbUrl, medias[i].Name);
    }
    
    ThumbHolder.render();
    
    displayType = 'Print';
}

function newAlbum()
{
    TabsPanel.promptCreateNewAlbum();
}

function populateMovePopup()
{
    populateAlbumListMarkup('div_move_album_markup');
}

function populateCopyPopup()
{
    populateAlbumListMarkup('div_popup_copy_album_markup');
}

function populateAlbumListMarkup(divName)
{
    var markup = new Sys.StringBuilder();
    var albums = TabsPanel.getAlbumsByType('Upload');

    markup.append("<table>");

    for (var i = 0; i < albums.length; i++)
    {
        markup.append("<tr><td><input type='radio' name='album_to_copy_to' value='");
        markup.append(albums[i].ID);
        markup.append("'/>&nbsp;</td><td>");
        markup.append(albums[i].Name);
        markup.append('</td></tr>');
    }

    markup.append("</table>");

    document.getElementById(divName).innerHTML = markup.toString();
}

function copyAlbum()
{
    var albums = ThumbHolder.getSelectedItems();
    
    if (albums.length == 0)
    {
        msgBox.Show(SR.CopyAlbumCopyit, SR.SelectAlbumToCopyHere, [{ Button: 'Ok'}]);
        return;
    }
    else
    {
        populateCopyPopup();
        PopupCopy.show();
    }
}

function getSelectedAlbumToCopyTo()
{
    var inputs = document.getElementsByName('album_to_copy_to');
    var albumID = null;
    
    for (var i = 0; i < inputs.length; i++)
    {
        if (inputs[i].checked)
        {
            albumID = inputs[i].value;
            break;
        }
    }
    
    return albumID;
}

function copyAlbumSelect()
{
    var albumID = getSelectedAlbumToCopyTo();
    
    if (albumID === null)
    {
        return;
    }
    
    var target = TabsPanel.getAlbumByID(albumID);
    
    if (target === null)
    {
        return;
    }
    
    PopupCopy.hide();
    showLoadingPopup(SR.CopyingPleaseWait);
    
    mediaCache[target.ID] = null;
    
    if (displayType == 'Album')
    {
        var albums = ThumbHolder.getSelectedItems();
        
        for (var i = 0; i < albums.length; i++)
        {
            target.NoOfMedia += albums[i].NoOfMedia;
            
            if (target.ThumbUrl.length == 0)
            {
                target.ThumbUrl = albums[i].ThumbUrl;
            }
        }
        
        ThumbHolder.update(target, target.ThumbUrl, target.Name, target.NoOfMedia);
        
        getAlbumService().CopyAlbums(ThumbHolder.getSelectedItemsSingleProperty('ID'), target.ID, function() { hideLoadingPopup(); }, gotError);
    }
    else
    {
        var prints = ThumbHolder.getSelectedItems();
        
        target.NoOfMedia += prints.length;
        
        if (target.ThumbUrl.length == 0)
        {
            target.ThumbUrl = prints[0].ThumbUrl;
        }
        
        getAlbumService().CopyPrintstoAlbum(ThumbHolder.getSelectedItemsSingleProperty('ID'), target.ID, function() { hideLoadingPopup(); ThumbHolder.deSelectAll(); }, gotError);
    }
}

function renameAlbum()
{
    var albums = ThumbHolder.getSelectedItems();

    if (albums.length == 0)
    {
        msgBox.Show(SR.RenameIt, SR.NoAlbumWasSelectedNo, [{ Button: 'Ok'}]);
    }
    else if (albums.length > 1)
    {
        msgBox.Show(SR.RenameIt, SR.YouCanOnlySelectOneAlbum, [{ Button: 'Ok'}]);
    }
    else
    {
        PopupRenameAlbum.show();
    }
}

function renameAlbumConfirmed(newName)
{
    if (newName.length == 0)
    {
        return;
    }
    
    var album = ThumbHolder.getSelectedItems()[0];
    
    album.Name = newName;
    
    getAlbumService().SaveRenamedAlbum(album.ID, album.Name, gotSuccess, gotError);

    ThumbHolder.update(album, album.ThumbUrl, album.Name, album.NoOfMedia);
    TabsPanel.rePopulateAlbumTabs();

    PopupRenameAlbum.hide();
    displayAlbums('Upload');
}

function removeAlbum()
{
    var albums = ThumbHolder.getSelectedItems();
    
    if (albums.length == 0)
    {
        msgBox.Show(SR.RemoveTheAlbum, SR.SelectAlbumToRemoveIt, [ { Button: 'Ok'} ]);
    }
    else
    {
        msgBox.Show(SR.DeleteConfirmation, SR.SelectedAlbumWillBeRemovedRemoved, [{ Button: 'Cancel'}, { Button: 'Ok', Callback: _removeAlbumConfirmed}]);
    }
}

function _removeAlbumConfirmed()
{
    var albums = ThumbHolder.getSelectedItems();
    var albumIDs = new Array;
    
    for (var i = 0; i < albums.length; i++)
    {
        albumIDs.push(albums[i].ID);
        ThumbHolder.remove(albums[i]);
    }
    
    TabsPanel.removeAlbums(albums);
    
    getAlbumService().RemoveAlbums(albumIDs, gotSuccess, gotError);
}

function albumOrderPrints()
{
    var albums = ThumbHolder.getSelectedItems();
    
    if (albums.length == 0)
    {
        msgBox.Show(SR.OrderPrints, SR.SelectPleaseAlbum, [{ Button: 'Ok'}]);
        return;
    }
    else
    {
        showAddToCartConfirmation();
    }
}

function _albumOrderPrints(redirectToCart)
{
    var IDs = ThumbHolder.getSelectedItemsSingleProperty('ID');
    showLoadingPopup(SR.AddingToCartPleaseWait);
    
    if (displayType == 'Album')
    {
        getAlbumService().AddAlbumsToCart(IDs, function() { if (redirectToCart) { location.href = shoppingCartURL; } else { hideLoadingPopup(); ShowCartItemCount(); } }, gotError);
    }
    else
    {
        getAlbumService().AddPrintsToCart(IDs, function() { if (redirectToCart) { location.href = shoppingCartURL; } else { hideLoadingPopup(); ShowCartItemCount(); } }, gotError);
    }
}

function albumShare()
{
    var albums = ThumbHolder.getSelectedItems();

    if (albums.length == 0)
    {
        msgBox.Show(SR.ShareAnAlbumWith, SR.SelectPleaseAlbum, [{ Button: 'Ok'}]);
    }
    else
    {
        for (var i = 0; i < albums.length; ++i) 
        {
            if (albums[i].NoOfMedia == 0)
            {
                Array.removeAt(albums, i);
                i--;
            }
        }
        
        if (albums.length > 0)
        {
            var albumIDs = new Array;
            
            for (var i = 0; i < albums.length; i++)
            {
                albumIDs.push(albums[i].ID);
            }
            
            getAlbumService().ShareAlbums(albumIDs, function(result) { location.href = '../share/generate_share.aspx?q=' + result; }, gotError);
        }
        else
        {
            msgBox.Show(SR.ShareAnAlbumWith, SR.TheAlbumYouHaveSelectedIsEmpty, [{ Button: 'Ok'}]);
        }
    }
}

function albumSlideshow()
{
    var albums = ThumbHolder.getSelectedItems();

    if (albums.length == 0)
    {
        msgBox.Show(SR.SlideShow, SR.NoAlbumWasSelectedNo, [{ Button: 'Ok'}]);
    }
    else if (albums.length > 1)
    {
        msgBox.Show(SR.SlideShow, SR.YouCanOnlySelectOneAlbum, [{ Button: 'Ok'}]);
    }
    else if (albums[0].NoOfMedia == 0)
    {
        msgBox.Show(SR.SlideShow, SR.ThereisnophotointheSelectedAlbum, [{ Button: 'Ok'}]);
    }
    else
    {
        location.href = 'slideshow_preview.aspx?q=' + albums[0].ID;
    }
}

function displayAlbums(type)
{
    var albums = TabsPanel.getAlbumsByType(type);
    
    if (displayType != 'Album')
    {
        var actionButtons = null;
        
        if (isNormalUser)
        {
            actionButtons = 
            [
                { Image: '../images/btns/btn_share_album' + SR.LanguageSuffix + '.gif', Callback: albumShare },
                { Image: '../images/btns/btn_order_prints' + SR.LanguageSuffix + '.gif', Callback: albumOrderPrints },
                { Image: '../images/btns/btn_slideshow' + SR.LanguageSuffix + '.gif', Callback: albumSlideshow }
            ];
        }
        else
        {
            actionButtons = 
            [
                { Image: '../images/btns/btn_order_prints' + SR.LanguageSuffix + '.gif', Callback: albumOrderPrints },
                { Image: '../images/btns/btn_slideshow' + SR.LanguageSuffix + '.gif', Callback: albumSlideshow }
            ];
        }

   
        ThumbHolder.setup(SR.Album, true, true,
            [
                { Name: 'Date', Value: 'DateCreated' }, { Name: SR.Name, Value: 'Name' }
            ],
            [
                { Text: SR.NewAlbum, Callback: newAlbum }, { Text: SR.Copy, Callback: copyAlbum }, { Text: SR.RenameIt, Callback: renameAlbum }, { Text: SR.Remove, Callback: removeAlbum }
            ], actionButtons);

        ThumbHolder.setContainerClasses('print');
        
        ThumbHolder.setThumbOuterClass('print');
        ThumbHolder.setThumbInnerClass('albums_thumb');
        ThumbHolder.setThumbLinkClass('albums_link');
        ThumbHolder.setContainerClasses('albums_listing', 'albums_listing_med', 'albums_listing_sm');
        ThumbHolder.setThumbEmptyClassName('empty');
        ThumbHolder.setThumbEmptyText(SR.ClickToAddImages);
        
        ThumbHolder.setThumbOnClickCallback(onAlbumClick);
    }
    else
    {
        ThumbHolder.clear();
    }

    for (var i = 0; i < albums.length; i++)
    {
        ThumbHolder.add(albums[i], albums[i].ThumbUrl, albums[i].Name, albums[i].NoOfMedia);
    }
    
    if (type == 'Upload' && albums.length == 0)
    {
        ThumbHolder.setThumbInputTypeName(null);
        ThumbHolder.add({ ID: '', Name: '', DateCreated: '', NoOfMedia: 0 }, null, '', null);
    }
    else
    {
        ThumbHolder.setThumbInputTypeName('checkbox');
        ThumbHolder.sort();
    }
    
    ThumbHolder.render();
    
    displayType = 'Album';
}

function projectCopy()
{
    if (projectSelected())
    {
        var project = ThumbHolder.getSelectedItem();
        
        getAlbumService().CopyProject2(project.ID, project.Type, projectCopyCallback, gotError);
    }
}

function projectCopyCallback(result)
{
    TabsPanel.addProject(result);
}

function projectRename()
{
    if (projectSelected())
    {
        var project = ThumbHolder.getSelectedItem();
        
        document.getElementById('imgRenameProject').src = project.ThumbUrl;
        document.getElementById('span_Rename_Project').innerHTML = project.Name;
        
        PopupRenameProject.show();
    }
}

function projectRenameConfirm(newName)
{
    var project = ThumbHolder.getSelectedItem();
    project.Name = newName;
    
    ThumbHolder.update(project, project.ThumbUrl, project.Name);
    TabsPanel.rePopulateProjectTabs();
    
    getAlbumService().RenameProject(project.ID, project.Name, gotSuccess, gotError);
    
    PopupRenameProject.hide();
}

function projectRemove()
{
    if (projectSelected())
    {
        msgBox.Show(SR.Remove, SR.AreYouSureYouWantToDeleteTheSelectedProjectss, [{ Button:'Cancel'}, { Button: 'Ok', Callback:projectRemoveConfirm }]);
    }
}

function projectRemoveConfirm()
{
    var project = ThumbHolder.getSelectedItem();
    
    ThumbHolder.remove(project);
    TabsPanel.removeProject(project);
    
    getAlbumService().RemoveProject(project.ID, gotSuccess, gotError);
}

function projectShare()
{
    if (projectSelected())
    {
        getAlbumService().ShareProjects([ThumbHolder.getSelectedItem().ID], function(result) { location.href = "../share/generate_share.aspx?q=" + result; }, gotError);
    }
}

function projectAddToCart()
{
    if (projectSelected())
    {
        var project = ThumbHolder.getSelectedItem();
        
        if (project.Type == 'Calendar')
        {
            getAlbumService().AddCalendarToCart(project.ID, gotRedirect, gotError);
        }
        else
        {
            getAlbumService().AddPhotoBookToCart(project.ID, gotRedirect, gotError);
        }
    }
}

function projectEdit()
{
    if (projectSelected())
    {
        var project = ThumbHolder.getSelectedItem();
    
        if (project.Type == 'Calendar')
        {
            location.href = 'calendar_custom_create.aspx?q=' + project.Params;
        }
        else
        {
            location.href = 'photobook_create.aspx?q=' + project.Params;
        }
    }
}

function projectPreview()
{
    if (projectSelected())
    {
        onProjectClick(ThumbHolder.getSelectedItem());
    }
}

function projectSelected()
{
    var project = ThumbHolder.getSelectedItem();
    
    if (project == null)
    {
        alert(SR.PleaseSelectAProject);
        return false;
    }
    
    return true;
}

function onProjectClick(project)
{   
    if (project.Type == 'Calendar')
    {
        location.href = 'calendar_custom_create.aspx?q=' + project.Params;
    }
    else
    {
        location.href = 'photobook_preview.aspx?q=' + project.Params;
    }
}

function displayProjects(type)
{
    var projects = TabsPanel.getProjectsByType(type);

    var actionButtons = null;
    
    ThumbHolder.clear();
    
    if (type == 'PhotoBook')
    {
        actionButtons = [
            { Image: '../images/btns/btn_sm_share_project' + SR.LanguageSuffix + '.gif', Callback: projectShare },
     // FB 20654      { Image: '../images/btns/btn_sm_add_to_cart' + SR.LanguageSuffix + '.gif', Callback: projectAddToCart },
            { Image: '../images/btns/btn_sm_edit_project' + SR.LanguageSuffix + '.gif', Callback: projectEdit },
            { Image: '../images/btns/btn_sm_preview_project' + SR.LanguageSuffix + '.gif', Callback: projectPreview }
        ]
    }
    else
    {
        actionButtons = [
    // FB 20654       { Image: '../images/btns/btn_sm_add_to_cart' + SR.LanguageSuffix + '.gif', Callback: projectAddToCart },
            { Image: '../images/btns/btn_sm_edit_project' + SR.LanguageSuffix + '.gif', Callback: projectEdit },
            { Image: '../images/btns/btn_sm_preview_project' + SR.LanguageSuffix + '.gif', Callback: projectPreview }
        ]
    }
    
    ThumbHolder.setup(SR.MyProjects, false, false, null,
        [
            { Text: SR.Copy, Callback: projectCopy }, { Text: SR.RenameIt, Callback: projectRename }, { Text: SR.Remove, Callback: projectRemove }
        ], actionButtons);

    ThumbHolder.setContainerClasses('print');
    ThumbHolder.setThumbOuterClass('print');
    ThumbHolder.setThumbInnerClass('project_thumb');
    ThumbHolder.setThumbLinkClass('albums_link');
    ThumbHolder.setThumbInputTypeName('radio');
    ThumbHolder.setContainerClasses('albums_listing', 'albums_listing_med', 'albums_listing_sm');
    
    ThumbHolder.setThumbOnClickCallback(onProjectClick);

    for (var i = 0; i < projects.length; i++)
    {
        ThumbHolder.add(projects[i], projects[i].ThumbUrl, projects[i].Name);
    }
    
    ThumbHolder.render();
    
    displayType = 'Project';
}

function documentsRemove()
{
    var documents = ThumbHolder.getSelectedItems();
    
    if (documents.length == 0)
    {           
        msgBox.Show(SR.RemoveDocument, SR.NoDocumentSelected, [ { Button: 'Ok' } ]);
    }
    else
    {
        msgBox.Show(SR.RemoveDocument, SR.DeleteDocument, [{ Button:'Cancel'}, { Button: 'Ok', Callback:documentsRemoveConfirm }]);
    }
}

function documentsRemoveConfirm()
{
    var documents = ThumbHolder.getSelectedItems();
    
    if (documents.length === 0)
    {
        return;
    }
    
    var documentIDs = ThumbHolder.getSelectedItemsSingleProperty('ID');
    
    for (var i = 0; i < documents.length; i++)
    {
        ThumbHolder.remove(documents[i]);
    }
    
    TabsPanel.removeDocuments(documents);

    getAlbumService().RemoveDocuments2(documentIDs, gotSuccess, gotError);
}

function displayDocuments()
{
    var documents = TabsPanel.getDocuments();
    
    if (displayType != 'Documents')
    {
        ThumbHolder.setup(SR.Documents, false, false, null,
            [
                { Text: SR.Remove, Callback: documentsRemove }
            ], 
            null);

        ThumbHolder.setContainerClasses('print');
        ThumbHolder.setThumbOuterClass('print');
        ThumbHolder.setThumbInnerClass('print_thumb');
        ThumbHolder.setThumbLinkClass('print_link');
        ThumbHolder.setThumbInputTypeName('checkbox');
        ThumbHolder.setContainerClasses('albums_listing', 'albums_listing_med', 'albums_listing_sm');
        
        ThumbHolder.setThumbOnClickCallback(null);
    }
    else
    {
        ThumbHolder.clear();
    }

    if (documents != null)
    {
        for (var i = 0; i < documents.length; i++)
        {
            ThumbHolder.add(documents[i], '../images/icon_pdfthumb.gif', documents[i].Name);
        }
    }
    
    ThumbHolder.render();
    
    displayType = 'Documents';
}


//
// Tabs
//

PhotoSite.TabsPanelTabs = function(containerDomElement, onTabChangedCallback, onTabClickedCallback)
{
    this._tabs = [];
    this._container = containerDomElement;
    this._clickDelegate = Function.createDelegate(this, this._selectTab);
    this._tabChangedCallback = onTabChangedCallback;
    this._tabClickedCallback = onTabClickedCallback;
};

PhotoSite.TabsPanelTabs.prototype = {
    _tabs: null,
    _container: null,
    _clickDelegate: null,
    _tabChangedCallback: null,
    _tabClickedCallback: null,
    _selectedTab: null,

    addTab: function(name, image, imageSelected)
    {
        var tabImg = document.createElement('img');
        var tabObj = { Name: name, Image: image, ImageSelected: imageSelected, DOMImage: tabImg };

        if (this._tabs.length === 0)
        {
            tabImg.src = imageSelected;
            this._selectedTab = tabObj;
        }
        else
        {
            tabImg.src = image;
        }

        tabImg.obj = tabObj;
        tabImg.parentObj = this;
        tabImg.style.cursor = 'pointer';
        tabImg.onclick = function() { this.parentObj._clickDelegate(this); };

        this._container.appendChild(tabImg);
        this._tabs.push(tabImg.obj);
    },

    selectTabByName: function(name)
    {
        for (var i = 0; i < this._tabs.length; i++)
        {
            if (this._tabs[i].Name == name)
            {
                this._selectTab(this._tabs[i].DOMImage);
                break;
            }
        }
    },

    _selectTab: function(img)
    {
        if (this._tabClickedCallback !== 'undefined' && this._tabClickedCallback !== null)
        {
            this._tabClickedCallback(this._selectedTab.Name);
        }

        if (this._selectedTab != img.obj)
        {
            this._selectedTab.DOMImage.src = this._selectedTab.Image;
            this._selectedTab = img.obj;
            this._selectedTab.DOMImage.src = this._selectedTab.ImageSelected;

            if (this._tabChangedCallback !== 'undefined' && this._tabChangedCallback !== null)
            {
                this._tabChangedCallback(this._selectedTab.Name);
            }
        }
    }
};

//
// Panel
//

PhotoSite.TabsPanel = function(ID, showProjectsTab, showDocumentsTab)
{
    this._id = ID;
    this._onProjectChangedDelegate = Function.createDelegate(this, this._onProjectChanged);
    this._onAlbumChangedDelegate = Function.createDelegate(this, this._onAlbumChanged);
    this._onTabChangedDelegate = Function.createDelegate(this, this._onTabChanged);
    this._onTabClickedDelegate = Function.createDelegate(this, this._onTabClicked);
    this._onSectionChangedDelegate = Function.createDelegate(this, this._onSectionChanged);
    this._tabs = new PhotoSite.TabsPanelTabs(document.getElementById(ID + '_domTabs'), this._onTabChangedDelegate, this._onTabClickedDelegate);
    
    this._tabs.addTab('albums', '../images/login/tab_orange_albums' + SR.LanguageSuffix + '.gif', '../images/login/tab_orange_albums' + SR.LanguageSuffix + '_on.gif');
    this._albumsList = new PhotoSite.TabsPanelList(document.getElementById(ID + '_domAlbumsScrollBox'), 'album_list_collapse', '');
    
    if (showProjectsTab)
    {
        this._tabs.addTab('projects', '../images/login/tab_orange_projects' + SR.LanguageSuffix + '.gif', '../images/login/tab_orange_projects' + SR.LanguageSuffix + '_on.gif');
        
        this._projectList = new PhotoSite.TabsPanelList(document.getElementById(ID + '_domProjectScrollBox'), 'album_list_collapse', '');
        this._projectListPhotoBooks = this._projectList.addSection('PhotoBooks', SR.MyPhotoBooks, this._onSectionChangedDelegate);
        this._projectListCalendars = this._projectList.addSection('Calendars', SR.MyCalendars, this._onSectionChangedDelegate);
        this._projectListShared = this._projectList.addSection('SharedPhotoBooks', SR.SharedWithYou, this._onSectionChangedDelegate);
    }
    
    if (showDocumentsTab)
    {
        this._tabs.addTab('documents', '../images/login/tab_orange_documents' + SR.LanguageSuffix + '.gif', '../images/login/tab_orange_documents' + SR.LanguageSuffix + '_on.gif');
    }
    
    this._albumsListUpload = this._albumsList.addSection('AlbumUpload', SR.MyAlbums, this._onSectionChangedDelegate);
    this._albumsListShared = this._albumsList.addSection('AlbumShared', SR.MySharedAlbums, this._onSectionChangedDelegate);
    this._albumsListFriend = this._albumsList.addSection('AlbumFriend', SR.SharedWithYou, this._onSectionChangedDelegate);
    
    this._albumsService = new IAlbumService();
};

PhotoSite.TabsPanel.prototype = {
    _id: null,
    _tabs: null,
    _albumsService: null,
    _albumsList: null,
    _albumsListUpload: null,
    _albumsListShared: null,
    _albumsListFriend: null,
    _projectList: null,
    _projectListPhotoBooks: null,
    _projectListCalendars: null,
    _projectListShared: null,

    _manager: null,
    _currentTab: null,
    _uploadUrl: null,

    _onTabChangedDelegate: null,
    _onTabChangedCallback: null,

    _onTabClickedDelegate: null,
    _onTabClickedCallback: null,

    _onAlbumChangedDelegate: null,
    _onAlbumChangedCallback: null,

    _onProjectChangedDelegate: null,
    _onProjectChangedCallback: null,

    _onSectionChangedDelegate: null,
    _onSectionChangedCallback: null,

    _userAlbums: null,
    _userProjects: null,
    _userDocuments: null,

    getCurrentTab: function()
    {
        return this._currentTab !== null ? this._currentTab : 'albums';
    },

    setCurrentTab: function(name)
    {
        this._tabs.selectTabByName(name);
        this._onTabChanged(name);
    },

    setUploadUrl: function(url)
    {
        this._uploadUrl = url;
    },

    onUploadButtonClick: function()
    {
        var uploadUrl = this._uploadUrl;
        var currentUrl = location.href;

        var index = currentUrl.indexOf('#', 0);

        if (index > 0)
        {
            currentUrl = currentUrl.substring(0, index);
        }

        index = currentUrl.indexOf('tab=');

        if (index > 0)
        {
            currentUrl = currentUrl.substring(0, index - 1);
        }

        if (uploadUrl.indexOf('?') > 0)
        {
            uploadUrl += '&';
        }
        else
        {
            uploadUrl += '?';
        }

        location.href = uploadUrl + 'referrer=' + escape(currentUrl + '?tab=' + this.getCurrentTab());
    },

    showCreateNewAlbum: function(show)
    {
        document.getElementById(this._id + '_domCreateNewAlbum').style.display = show ? '' : 'none';
    },

    setOnTabChangedCallback: function(callbackFunction)
    {
        this._onTabChangedCallback = callbackFunction;
    },

    setOnTabClickedCallback: function(callbackFunction)
    {
        this._onTabClickedCallback = callbackFunction;
    },

    setOnSectionChangedCallback: function(callbackFunction)
    {
        this._onSectionChangedCallback = callbackFunction;
    },

    populateAlbums: function()
    {
        //alert('go');
        this._albumsService.GetUserAlbums2(Function.createDelegate(this, this._onGotUserAlbums), gotError);
    },

    populateProjects: function()
    {
        this._albumsService.GetUserProjects2(Function.createDelegate(this, this._onGotUserProjects), gotError);
    },

    populateDocuments: function()
    {
        this._albumsService.GetUserDocuments2(Function.createDelegate(this, this._onGotUserDocuments), gotError);
    },

    _onTabClicked: function(name)
    {
        if (this._onTabClickedCallback !== null)
        {
            this._onTabClickedCallback(name);
        }
    },

    _showHideContainer: function(container, show)
    {
        var element = document.getElementById(this._id + '_dom' + container + 'Container');

        if (element !== null)
        {
            element.style.display = show ? '' : 'none';
        }
    },

    _onTabChanged: function(name)
    {
        this._showHideContainer('Albums', name == 'albums');
        this._showHideContainer('Projects', name == 'projects');
        this._showHideContainer('Documents', name == 'documents');

        if (name == 'albums' && this._userAlbums === null)
        {
            this.populateAlbums();
        }
        else if (name == 'projects' && this._userProjects === null)
        {
            this.populateProjects();
        }
        else if (name == 'documents' && this._userDocuments === null)
        {
            this.populateDocuments();
        }

        if (this._onTabChangedCallback !== null)
        {
            this._onTabChangedCallback(name);
        }

        this._currentTab = name;
    },

    _onSectionChanged: function(section)
    {
        if (this._onSectionChangedCallback)
        {
            this._onSectionChangedCallback(section);
        }
    },

    _onGotUserDocuments: function(result)
    {
        this._userDocuments = result;
        this._populateDocumentsTabs();
        this._onTabChanged('documents');
    },

    _populateDocumentsTabs: function()
    {
        RadixSort.sortByKey(this._userDocuments, 'Year');

        var lastYear = null;
        var scrollbox = document.getElementById(this._id + '_domDocumentsScrollBox');
        scrollbox.innerHTML = '';

        for (var i = 0; i < this._userDocuments.length; i++)
        {
            var doc = this._userDocuments[i];

            if (doc.Year != lastYear)
            {
                var yearHeader = document.createElement('div');
                yearHeader.innerHTML = '<strong>' + doc.Year + '</strong>';
                yearHeader.style.color = '#707172';
                yearHeader.style.height = '20px';
                yearHeader.style.paddingLeft = '15px';
                scrollbox.appendChild(yearHeader);
                lastYear = doc.Year;
            }

            var docDiv = document.createElement('div');
            docDiv.innerHTML = doc.Name;
            docDiv.style.paddingLeft = '20px';
            scrollbox.appendChild(docDiv);
        }
    },

    _onGotUserProjects: function(result)
    {
        this._userProjects = result;

        this._populateProjectTabs();

        this._projectList.expandSection(this._projectListPhotoBooks);
        this._onSectionChanged(this._projectList.getExpandedSection());
    },

    _populateProjectTabs: function()
    {
        this._projectListPhotoBooks.clear();
        this._projectListCalendars.clear();
        this._projectListShared.clear();

        for (var i = 0; i < this._userProjects.length; i++)
        {
            var project = this._userProjects[i];

            if (project.Type == 'PhotoBook')
            {
                this._projectListPhotoBooks.addItem(project.Name, this._onProjectChangedDelegate, project);
            }
            else if (project.Type == 'Calendar')
            {
                this._projectListCalendars.addItem(project.Name, this._onProjectChangedDelegate, project);
            }
            else
            {
                this._projectListShared.addItem(project.Name, this._onProjectChangedDelegate, project);
            }
        }

        this._projectListPhotoBooks.setTextIfNoItems(SR.YouHaveNoPhotobook);
        this._projectListCalendars.setTextIfNoItems(SR.YouHaveNoCalendar);
        this._projectListShared.setTextIfNoItems(SR.YouHaveNoProjectsSharedWithYou);
    },

    _populateAlbumTabs: function()
    {
        this._albumsListUpload.clear();
        this._albumsListShared.clear();
        this._albumsListFriend.clear();

        for (var i = 0; i < this._userAlbums.length; i++)
        {
            var album = this._userAlbums[i];

            if (album.Type == 'Upload')
            {
                this._albumsListUpload.addItem(album.Name, this._onAlbumChangedDelegate, album);
            }
            else if (album.Type == 'Share')
            {
                this._albumsListShared.addItem(album.Name, this._onAlbumChangedDelegate, album);
            }
            else if (album.Type == 'Friend')
            {
                this._albumsListFriend.addItem(album.Name, this._onAlbumChangedDelegate, album);
            }
        }

        this._albumsListUpload.setTextIfNoItems(SR.YouHaveNoAlbum);
        this._albumsListShared.setTextIfNoItems(SR.YouHaveNoAlbum);
        this._albumsListFriend.setTextIfNoItems(SR.YouHaveNoAlbumsSharedWithYou);
    },

    _onGotUserAlbums: function(result)
    {
        this._userAlbums = result;
        this._populateAlbumTabs();
        this._albumsList.expandSection(this._getDefaultSectionToDisplay());
        this._onSectionChanged(this._albumsList.getExpandedSection());
    },

    _getDefaultSectionToDisplay: function()
    {
        if (this._albumsListUpload.getLength() > 0) return this._albumsListUpload;
        else if (this._albumsListShared.getLength() > 0) return this._albumsListShared;
        else if (this._albumsListFriend.getLength() > 0) return this._albumsListFriend;
        else return this._albumsListUpload;
    },

    _getDataByType: function(array, type)
    {
        var result = [];

        if (array !== null)
        {
            for (var i = 0; i < array.length; i++)
            {
                if (array[i].Type == type)
                {
                    result.push(array[i]);
                }
            }
        }

        return result;
    },

    getProjectsByType: function(type)
    {
        return this._getDataByType(this._userProjects, type);
    },

    getAlbumsByType: function(type)
    {
        return this._getDataByType(this._userAlbums, type);
    },

    hasAlbums: function()
    {
        return this._userAlbums !== null;
    },

    getAlbumByID: function(id)
    {
        if (this._userAlbums === null)
        {
            return null;
        }

        for (var i = 0; i < this._userAlbums.length; i++)
        {
            if (this._userAlbums[i].ID == id)
            {
                return this._userAlbums[i];
            }
        }

        return null;
    },

    getDocuments: function()
    {
        return this._userDocuments;
    },

    getAlbumByID: function(id)
    {
        for (var i = 0; i < this._userAlbums.length; i++)
        {
            if (this._userAlbums[i].ID == id)
            {
                return this._userAlbums[i];
            }
        }
    },

    setManager: function(manager)
    {
        this._manager = manager;
    },

    getManager: function()
    {
        return this._manager;
    },

    setOnProjectChangedCallback: function(func)
    {
        this._onProjectChangedCallback = func;
    },

    _onProjectChanged: function(project)
    {
        if (this._onProjectChangedCallback !== null)
        {
            this._onProjectChangedCallback(project);
        }
    },

    setOnAlbumChangedCallback: function(func)
    {
        this._onAlbumChangedCallback = func;
    },

    _onAlbumChanged: function(album)
    {
        if (this._onAlbumChangedCallback !== null)
        {
            this._onAlbumChangedCallback(album);
        }
    },

    promptCreateNewAlbum: function(onSuccess)
    {
        PopupCreateAlbum.show();
    },

    _createNewAlbum: function(name, description)
    {
        if (name.length === 0 || description.length === 0)
        {
            alert(SR.PleaseFillOutTheInformationRequired);
            // Added by KG dated 06/07/2009 ==> To hide the Create Album screen after validation.
            PopupCreateAlbum.hide();
            return;
        }
        else
        {
            PopupCreateAlbum.hide();
        }

        this._albumsService.CreateAlbum(name, description, Function.createDelegate(this, this._onAlbumCreated), gotError);
    },

    _onAlbumCreated: function(result)
    {
        this._userAlbums.push(result);
        this._albumsListUpload.addFirstItem(result.Name, this._onAlbumChangedDelegate, result);

        if (this._albumsListUpload.expanded() === false)
        {
            this._albumsList.expandSection(this._albumsListUpload);
        }

        this._onSectionChanged(this._albumsListUpload);
    },

    removeAlbums: function(albums)
    {
        for (var i = 0; i < albums.length; i++)
        {
            Array.remove(this._userAlbums, albums[i]);
        }
        this._populateAlbumTabs();
    },

    removeDocuments: function(documents)
    {
        for (var i = 0; i < documents.length; i++)
        {
            Array.remove(this._userDocuments, documents[i]);
        }
        this._populateDocumentsTabs();
    },

    removeProject: function(project)
    {
        Array.remove(this._userProjects, project);
        this._populateProjectTabs();
    },

    addProject: function(project)
    {
        this._userProjects.push(project);
        this._populateProjectTabs();
        this._onSectionChanged(this._projectList.getExpandedSection());
    },

    rePopulateAlbumTabs: function()
    {
        this._populateAlbumTabs();
    },

    rePopulateProjectTabs: function()
    {
        this._populateProjectTabs();
    }

};

//
// List
//

PhotoSite.TabsPanelList = function(parentDOMElement, liCollapsedStyle, liExpandedStyle)
{
    this._sections = [];
    this._parentUlElement = document.createElement('ul');
    this._liCollapsedStyle = liCollapsedStyle;
    this._liExpandedStyle = liExpandedStyle;
    
    parentDOMElement.appendChild(this._parentUlElement);
    
    this._sectionClickDelegate = Function.createDelegate(this, this.expandSection);
};

PhotoSite.TabsPanelList.prototype = {
    _parentUlElement: null,
    _liCollapsedStyle: null,
    _liExpandedStyle: null,
    _sectionClickDelegate: null,
    _sections: null,
    
    getExpandedSection: function()
    {
        for (var i = 0; i < this._sections.length; i++)
        {
            if (this._sections[i].expanded())
            {
                return this._sections[i];
            }
        }
        return null;
    },
    
    expandSection: function(section)
    {
        for (var i = 0; i < this._sections.length; i++)
        {
            if (this._sections[i] == section)
            {
                if (this._sections[i].expanded())
                {
                    this._sections[i].collapse();
                }
                else
                {
                    this._sections[i].expand();
                }
            }
            else
            {
                this._sections[i].collapse();
            }
        }
    },
    
    addSection: function(ID, Text, onClickCallback)
    {
        var parent  = this;
        var handler = function (section)
        {
            if (typeof(onClickCallback) !== 'undefined' && onClickCallback !== null)
            {
                onClickCallback(section);
            }
            parent._sectionClickDelegate(section);
        };
        var section = new PhotoSite.TabsPanelListSection(this._parentUlElement, this._liCollapsedStyle, this._liExpandedStyle, ID, Text, handler);
        this._sections.push(section);
        return section;
    }
};

PhotoSite.TabsPanelListSection = function(parentDOMElement, liCollapsedStyle, liExpandedStyle, ID, Text, onClickCallback)
{
    this._id = ID;
    this._liCollapsedStyle = liCollapsedStyle;
    this._liExpandedStyle = liExpandedStyle;
    
    this._divElement = document.createElement('div');
    this._divElement.style.display = 'none';
    
    this._headElement = document.createElement('h2');
    this._headElement.innerHTML = Text;
    this._headElement.obj = this;
    this._headElement.onclick = function() { onClickCallback(this.obj); };
    this._headElement.style.cursor = 'pointer';     // FIXME: move to CSS
    
    this._liElement = document.createElement('li');
    this._liElement.appendChild(this._headElement);
    this._liElement.appendChild(this._divElement);
    this._liElement.className = this._liCollapsedStyle;
    
    parentDOMElement.appendChild(this._liElement);
};

PhotoSite.TabsPanelListSection.prototype = {
    _id: null,
    _domContent: null,
    _liElement: null,
    _divElement: null,
    _headElement: null,
    _liCollapsedStyle: null,
    _liExpandedStyle: null,
    _expanded: false,
    _length: 0,
    
    getLength: function()
    {
        return this._length;
    },

    getID: function()
    {
        return this._id;
    },

    _createItem: function(text, onClickCallback, context)
    {
        var p = document.createElement('p');
        var a = document.createElement('a');
        
        p.appendChild(a);
        a.id = 'add_photo_tab';
        a.innerHTML = text;
        a.href = '#';
        a.onclick = function() { if (onClickCallback) { onClickCallback(context); } return false; };
        
        return p;
    },

    addFirstItem: function(text, onClickCallback, context)
    {
        var item = this._createItem(text, onClickCallback, context);
        if (this._divElement.firstChild !== null)
        {
            this._divElement.insertBefore(item, this._divElement.firstChild);
        }
        else
        {
            this._divElement.appendChild(item);
        }
        this._length++;
    },

    clear: function()
    {
        while (this._divElement.firstChild)
        {
            this._divElement.removeChild(this._divElement.firstChild);
        }
        this._length = 0;
    },

    addItem: function(text, onClickCallback, context)
    {
        this._divElement.appendChild(this._createItem(text, onClickCallback, context));
        this._length++;
    },
    
    setTextIfNoItems: function(text)
    {
        if (this._divElement.firstChild === null)
        {
            this._divElement.appendChild(document.createTextNode(text));
        }
    },
    
    expanded: function()
    {
        return this._expanded;
    },
    
    expand: function()
    {
        this._liElement.className = this._liExpandedStyle;
        this._divElement.style.display = '';
        this._expanded = true;
    },
    
    collapse: function()
    {
        this._liElement.className = this._liCollapsedStyle;
        this._divElement.style.display = 'none';
        this._expanded = false;
    }
};

if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();