//
// 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;
    }
};