var Tag = new Class ({
    id: 0,
    name: null,
    initialize: function(tagName) {
        this.id = Math.ceil(Math.random() * 1000000);
        this.name = tagName;
    },

    clone: function() {
        var newTag = new Tag(this.name);
        newTag.id = this.id;
        return newTag;
    }

});

var TagManager = {
    tags: new Object(),
    suggestedTags: new Object(),
    suggestedScroller: null,
    newScroller: null,
    
    initSuggestedScroller: function() {
        if (this.suggestedScroller == null) {
            this.suggestedScroller = new MooScroller($('suggestedTagListContainer'), $('suggestedScrollKnob'), {
            	scrollLinks: {
            		forward: $('suggestedScrollForward'),
            		back: $('suggestedScrollBack')
            	}
            });                        
        }
    },
    
    updateSuggestedScroller: function() {
        this.suggestedScroller.update();
    },

    initNewScroller: function() {
        if (this.newScroller == null) {
            this.newScroller = new MooScroller($('newTagListContainer'), $('newScrollKnob'), {
            	scrollLinks: {
            		forward: $('newScrollForward'),
            		back: $('newScrollBack')
            	}
            });                        
        }
    },

    updateNewScroller: function() {
        this.newScroller.update();
    },


    setSuggestedTags: function(tagNames) {
        this.suggestedTags = new Object();
        for (var i = 0; i < tagNames.length; i++) {
            var tagName = tagNames[i];
            if (!this.tagExists(tagName)) {
                var tag = new Tag(tagName);
                this.suggestedTags[tag.id] = tag;
            }
        }
    },
    
    tagExists: function(tagName) {
        for (var id in this.tags) {
            var tag = this.tags[id];
            if (tag.name == tagName) {
                return true;
            }
        }

        return false;
    },

    removeSuggestedTag: function(tagId) {
        delete this.suggestedTags[tagId];
        
        if (this.getSuggestedTagCount() == 0) {
            $('suggestedTagText').setStyle('display', 'block');
        }
    },

    getSuggestedTagCount: function() {
        var i = 0;
        for (i in this.suggestedTags) {
            i++;
        }
        return i;
    },
    
    displaySuggestedTags: function(parentUl) {
        this.clearUl(parentUl);
        if (this.getSuggestedTagCount() != 0) {
            $('suggestedTagText').setStyle('display', 'none');
        } else {
            $('suggestedTagText').setStyle('display', 'block');
        
        }

        //loop through tags and create LI's
        for (var id in this.suggestedTags) {
            var tag = this.suggestedTags[id];

            var newListItem = new Element('li', {
                'id': 'suggested_tag_' + tag.id
            });
            
            var moveLink = new Element('a', {
                'id': 'move_tag_' + tag.id,
                'html': tag.name,
                'href': '#'
            });
            newListItem.appendChild(moveLink);

            moveLink.addEvent('click', function(e) {
                var moveTagLi = e.target.getParent();
                var moveTagId = e.target.id.replace("move_tag_", "");
                var fx = new Fx.Morph(moveTagLi, {
                    duration: 250,
                    onComplete: function() {
                        var moveTag = TagManager.suggestedTags[moveTagId];
                        var newTag = moveTag.clone();
                        TagManager.addTag(newTag);
                        TagManager.removeSuggestedTag(moveTag.id);
                        TagManager.displayTag(newTag, $('newTagList'));
                        moveTagLi.dispose();
                        TagManager.updateSuggestedScroller();
                        TagManager.updateNewScroller();
                    }
                });
                fx.start({'opacity' : '0'});
            });

            parentUl.appendChild(newListItem);
        }
        
        this.updateSuggestedScroller();
    },
    
    clearUl: function(parentUl) {
        if (parentUl.hasChildNodes()) {
            while (parentUl.childNodes.length > 0) {
                parentUl.removeChild(parentUl.firstChild);
            }
        }
    },

    createTag: function(tagName) {
        var tag = new Tag(tagName);
        this.tags[tag.id] = tag;
        return tag;
    },
    
    addTag: function(tag) {
        this.tags[tag.id] = tag;
    },

    removeTag: function(tagId) {
        delete this.tags[tagId];
    },
    
    displayTag: function(tag, parentUl) {
        var newListItem = new Element('li', {
            id: 'tag_' + tag.id,
            html: tag.name,
            styles: {'opacity': '0'}
        });
        
        this.insertRemoveLink(tag, newListItem); 
        parentUl.appendChild(newListItem);
        new Fx.Tween(newListItem, {duration: 250}).start('opacity', 1);
        this.updateNewScroller();
    },
    
    insertRemoveLink: function(tag, tagLi) {
        var removeLink = new Element('a', {
            id: 'remove_tag_' + tag.id,
            href: '#',
            html: 'x'
        });
        removeLink.addEvent('click', function(e) {
            var tagLiClicked = e.target.getParent();
            var tagId = e.target.id.replace("remove_tag_", "");
            TagManager.removeTag(tagId);
            var fx = new Fx.Morph(tagLiClicked, {
                duration: 200,
                onComplete: function() {
                    tagLiClicked.dispose();
                    TagManager.updateNewScroller();
                }
            });
            fx.start({'opacity' : '0'});
        });

        tagLi.appendChild(removeLink);
    },
    
    generateTagsString: function() {
        var tagsString = "";
        for (var id in this.tags) {
            var tag = this.tags[id];
            tagsString += tag.name + ",";
        }
        
        tagsString = tagsString.substring(0, tagsString.length-1);
        return tagsString; 
    },
    
    clearAllTags: function(tagsUl, suggestedTagsUl) {
        this.tags = new Object();
        this.clearUl(tagsUl);

        this.suggestedTags = new Object();
        this.clearUl(suggestedTagsUl);
    }
    
    
}

var OverlayManager = {
    animationDuration: 250,
    loginDiv: null,
    isLoginDisplayed: false,
    registerDiv: null,
    isRegisterDisplayed: false,
    termsDiv: null,
    isTermsDisplayed: false,
    answerDiv: null,
    isAnswerDisplayed: false,
    homepageQuestionDiv: null,
    isHomepageQuestionDisplayed: false,
    
    toggleLogin: function() {
        (this.isLoginDisplayed) ? this.hideLogin() : this.showLogin();
    },
    
	showLogin: function() {
        if (this.isRegisterDisplayed) {
            this.hideRegister();
        }	   
        
        this.isLoginDisplayed = true;
        if (this.loginDiv == null) { 
            this.loginDiv = $('menuLoginOverlay');
        }

        this.loginDiv.setStyles({'opacity':0, 'height':0, 'display': 'inline'});
        var fx = new Fx.Morph(this.loginDiv, {duration:this.animationDuration});
        fx.start({
            'opacity' : '1',
            'height' : '217px'
        });
	},

	hideLogin: function() {
        this.isLoginDisplayed = false;
        var fx = new Fx.Morph(this.loginDiv, {duration:this.animationDuration});
        fx.start({
            'opacity' : '0',
            'height' : '0px'
        });
	},

    toggleRegister: function() {
        (this.isRegisterDisplayed) ? this.hideRegister() : this.showRegister();
    },

	showRegister: function() {
        if (this.isLoginDisplayed) {
            this.hideLogin();
        }	   

        this.isRegisterDisplayed = true;
        if (this.registerDiv == null) {
            this.registerDiv = $('menuRegisterOverlay');
        }

        this.registerDiv.setStyles({'opacity':0, 'height':0, 'display': 'inline'});
        var fx = new Fx.Morph(this.registerDiv, {duration:this.animationDuration});
        fx.start({
            'opacity' : '1',
            'height' : '185px'
        });
	},

	hideRegister: function() {
	   if (this.isTermsDisplayed) {
           this.hideTerms();
	   }
	
	    this.isRegisterDisplayed = false;
        var fx = new Fx.Morph(this.registerDiv, {duration:this.animationDuration});
        fx.start({
            'opacity' : '0',
            'height' : '0px'
        });
	},

    toggleTerms: function() {
        (this.isTermsDisplayed) ? this.hideTerms() : this.showTerms();
    },

	showTerms: function() {
        this.isTermsDisplayed = true;
        if (this.termsDiv == null) {
            this.termsDiv = $('termsContainer');
        }

        this.termsDiv.setStyles({'opacity':0, 'height':0, 'display': 'inline'});
        var fx = new Fx.Morph(this.termsDiv, {duration:this.animationDuration});
        fx.start({
            'opacity' : '1',
            'height' : '250px'
        });
	},

	hideTerms: function() {
	    this.isTermsDisplayed = false;
        var fx = new Fx.Morph(this.termsDiv, {duration:this.animationDuration});
        fx.start({
            'opacity' : '0',
            'height' : '0px'
        });
	},

    toggleAnswer: function() {
        (this.isAnswerDisplayed) ? this.hideAnswer() : this.showAnswer();
    },
    
	showAnswer: function() {
        this.isAnswerDisplayed = true;
        if (this.answerDiv == null) {
            this.answerDiv = $('addAnswerOverlay');
        }
        
        var qfx = new Fx.Morph($('questionContainer'), {duration:this.animationDuration});
        qfx.start({
            'margin-bottom' : '165px'
        });

        
        this.answerDiv.setStyles({'opacity':'0', 'height':'0px', 'display': 'inline'});
        var fx = new Fx.Morph(this.answerDiv, {duration: this.animationDuration});
        fx.start({
            'opacity' : '1',
            'height' : '185px'
        });
        //$('addAnswerForm').answerText.focus();

	},

	hideAnswer: function() {
        this.isAnswerDisplayed = false;

        var qfx = new Fx.Morph($('questionContainer'), {duration:this.animationDuration});
        qfx.start({
            'margin-bottom' : '20px'
        });

        var fx = new Fx.Morph(this.answerDiv, {duration:this.animationDuration});
        fx.start({
                'opacity' : '0',
            'height' : '0px'
        });
	},

    toggleHomepageQuestion: function() {
        (this.isHomepageQuestionDisplayed) ? this.hideHomepageQuestion() : this.showHomepageQuestion();
    },
    
	showHomepageQuestion: function() {

        this.isHomepageQuestionDisplayed = true;
        if (this.homepageQuestionDiv == null) {
            this.homepageQuestionDiv = $('addQuestionOverlay');
        }
        
        this.homepageQuestionDiv.setStyles({'opacity':0, 'display': 'inline'});
        var fx = new Fx.Morph(this.homepageQuestionDiv, {duration:this.animationDuration*2});
        fx.start({
            'opacity' : '1',
            'height' : '213px',
            'width' : '896px',
            'left' : '0px'
        });
        
        TagManager.initSuggestedScroller();
        TagManager.initNewScroller();

	},

	hideHomepageQuestion: function() {
        this.isHomepageQuestionDisplayed = false;

        var fx = new Fx.Morph(this.homepageQuestionDiv, {duration:this.animationDuration*2});
        fx.start({
            'opacity' : '0',
            'width' : '0px',
            'left' : '896px'
        });
	}

};

var SubscriptionManager = {
    animationDuration: 250,

    /* This requires the subscribe link to have an id of subscribeLink_<qId> */
    subscribeQuestion: function(qId) {
        new Fx.Tween('subscribeLink_'+qId, {
            onComplete: function() {
                new Request.JSON({
                    url: '/services/subscriptions/subscribe.php',
                	method: 'post',
                	data: "itemId=" + qId + "&itemType=Q",
                    onComplete: function() {
                        $('unsubscribeLink_'+qId).setStyle('display', 'inline');
                        new Fx.Tween('unsubscribeLink_'+qId).start("opacity", 1);
                    }
                }).send();
            }
        }).start("opacity", 0);
    },
    
    unsubscribeQuestion: function(qId) {
        new Fx.Tween('unsubscribeLink_'+qId, {
            onComplete: function() {
                new Request.JSON({
                    url: '/services/subscriptions/unsubscribe.php',
                	method: 'post',
                	data: "itemId=" + qId + "&itemType=Q",
                    onComplete: function() {
                        $('subscribeLink_'+qId).setStyle('display', 'inline');
                        new Fx.Tween('subscribeLink_'+qId).start("opacity", 1);
                    }
                }).send();
            }
        }).start("opacity", 0);
    }
    
};