$.fn.replace = function(o) { return this.after(o).remove(); };
$.fn.htmlFade = function(html, callback) {
    var obj = this;
    obj.fadeOut("slow", function() {
        obj.html(html);
        if (typeof callback == "function")  
            callback();
        obj.fadeIn("slow");
    });
};
$.fn.htmlSlide = function(html, callback) {
    var obj = this;
    obj.slideUp("slow", function() {
        obj.html(html);
        if (typeof callback == "function")  
            callback(); 
        obj.slideDown("slow");
    });
};

var postUrl = 'http://www.colorschemer.com/schemes/ajax_scheme.php';

$(document).ready(function() {

    $(".description, .url").filter(".editable")
        .hover(function() {
            $(this).addClass("editable_hover");
        }, function() {
            $(this).removeClass("editable_hover");
        })
    
        .click(function() {
            $(this).removeClass("editable_hover");
        });
    
    $(".expand_scheme")
        .click(function() {
            var scheme = $(this).parents(".scheme");
            var id = scheme.attr("id");
            var colors = scheme.find(".colors");
            var toggleImg = $(this).children("img");
            var imgSrc = toggleImg.attr("src");
            var numColors = (imgSrc.substring(imgSrc.length - 10, imgSrc.length) == 'expand.gif') ? 999 : 24;
            //alert(numColors);
            $.ajax({
                type: "POST",
                url: postUrl,
                data: "id=" + id + "&showColors=" + numColors,
                success: function(rsp) {
                    colors.htmlSlide(rsp);
                    toggleImg.attr("src", (numColors == 999) ? '/images/collapse.gif' : '/images/expand.gif');
                }
            });
            return false;
        })
        
        .focus(function() {
            this.blur();        
        });
    
    $(".one_star, .two_stars, .three_stars, .four_stars, .five_stars").click(function() {
        var container = $(this).parents("div:first"); //.parent().parent(); //a/this -> li -> ul -> div#rating_id
        var id = $(this).parents(".scheme").attr("id");
        var rating = $(this).text();
        
        $.ajax({
            type: "POST",
            url: postUrl,
            data: "id=" + id + "&rating=" + rating,
            success: function(rsp) {
                container.htmlFade(rsp);
            }
        });
        return false;
    });
    
    $(".private input").click(function() {
        var id = $(this).parents(".scheme").attr("id");
        var isPrivate = ((this.checked) ? 1 : 0);
        
        $(this).after("<label id=\"save_indicator\">Saving...</label>");
        $.ajax({
            type: "POST",
            url: postUrl,
            data: "id=" + id + "&private=" + isPrivate,
            success: function(rsp) {
                $("#save_indicator").fadeOut("slow", function() {
                    $(this).remove();
                });
            }
        });
    });

    $(".description").filter(".editable").editable(postUrl, {
        placeholder: "Click here to add a description",
        type: "textarea",
        indicator: "Saving...",
        tooltip: "Click to edit",
        name: "description",
        submit: "Save",
        cancel: "Cancel",
        onblur: "ignore",
        cssclass: "editable",
        height: "40px",
        data: function(value, settings) {
           var retval = value.replace(/<br[\s\/]?>/gi, '');
           return retval;
        },
        callback: function(value, settings) {
            if (value != '')
                $(this).removeClass("editable_empty");
            else
                $(this).addClass("editable_empty");
        }
    });
  
    $(".url").filter(".editable").editable(postUrl, {
        placeholder: "Click here to add a URL",
        indicator: "Saving...",
        tooltip: "Click to edit",
        name: "url",
        submit: "Save",
        cancel: "Cancel",
        onblur: "ignore",
        cssclass: "editable",
        data: function(value, settings) {
           var retval = (value.substring(0, 7) != 'http://') ? 'http://' + value : value;
           return retval;
        },
        callback: function(value, settings) {
            var urlContainer = $("#url_" + this.id);
            var urlAnchor = $("#url_" + this.id + " a");
            if (value != '')
            {
                var urlContainerHTML = "<span class=\"sep_right\" id=\"url_" + this.id + "\"><a href=\"" + value + "\" title=\"Scheme based on " + value + "\">URL</a></span>";
                if (urlContainer.length == 0)
                {
                    $("#author_" + this.id).parents("div:first").append(urlContainerHTML); //create element
                    $("#url_" + this.id).hide().fadeIn("slow");
                }
                else
                    urlContainer.replace(urlContainerHTML); //replace element
                
                $(this).removeClass("editable_empty");
            }
            else
            {
                if (urlContainer.length > 0)
                {
                    urlContainer.fadeOut("slow", function() {
                        urlContainer.remove();
                    });
                }
                
                $(this).addClass("editable_empty");
            }
        }
    });
    
    
    //event delegate
    $('body')
        .click(function(event) {
            var obj = $(event.target);
            
            //add/remove fav
            if (obj.is('a.add_fav, a.remove_fav')) {
                var scheme = obj.parents(".scheme");
                var id = scheme.attr("id");
                var favClass = obj.attr("class");
                var qs;
                
                qs = ((favClass == 'add_fav') ? 'addfav=1' : 'removefav=1');
                
                $.ajax({
                    type: "POST",
                    url: postUrl,
                    data: "id=" + id + "&" + qs,
                    error: function() {
                        alert("Error editing Favorites");
                    },
                    success: function(rsp) {
                        if (rsp)
                        {
                            if (rsp.substring(0, 8) == '<script>')
                                obj.append(rsp);
                            else
                                obj.replace(rsp);
                        }
                    }
                });
                
                return false;
            }
            
            //delete tag
            if (obj.is('a.del_tag')) {
                var id = obj.parents(".scheme").attr("id");
                var tag = obj.prev();
                var tagName = tag.text();
                
                if (confirm('Are you sure you want to remove the tag "' + tagName + '"?'))
                {
                    $.ajax({
                        type: "POST",
                        url: postUrl,
                        data: "id=" + id + "&removetag=" + tagName,
                        error: function() {
                            alert("Error removing tag");
                        },
                        success: function(rsp) {
                            obj.fadeOut("slow");
                            tag.fadeOut("slow");
                        }
                    });
                }
                
                return false;
            }
        });
        
        //.focus(function(event) {
        //    event.target.blur();
        //});
    
    
    //delete scheme
    $('a.del_scheme').click(function() {
        var scheme = $(this).parents(".scheme");
        var id = scheme.attr("id");
        
        if (confirm('Are you sure you want to permanently delete this scheme?'))
        {
            $.ajax({
                type: "POST",
                url: postUrl,
                data: "id=" + id + "&deletescheme=1",
                error: function() {
                    alert("Error deleting scheme");
                },
                success: function(rsp) {
                    scheme.fadeOut("slow");
                }
            });
        }
        
        return false;
    });
    
    //add/remove fav
    /*$('a.add_fav, a.remove_fav')
        .click(function() {
            var obj = this;
            var scheme = $(obj).parents(".scheme");
            var id = scheme.attr("id");
            var favClass = $(obj).attr("class");
            var qs;
            
            qs = ((favClass == 'add_fav') ? 'addfav=1' : 'removefav=1');
            //return false;
            
            $.ajax({
                type: "POST",
                url: postUrl,
                data: "id=" + id + "&" + qs,
                error: function() {
                    alert("Error editing Favorites");
                },
                success: function(rsp) {
                    $(obj).replace(rsp);
                }
            });
            
            return false;
        })
    
        .focus(function() {
            this.blur();        
        });*/
    
    //hide/show addtag form
    $('a.toggle_add_tag')
        .click(function() {
            var toggleLink = $(this);
            var form = $(this).parents(".tagsContainer").children("form");
            
            form.slideToggle("normal", function() {
                if (this.style.display == "none")
                    toggleLink.text("+");
                else
                    toggleLink.text("-");
            });
            
            return false;
        })
        
        .focus(function() {
            this.blur();        
        });
    
    
    //add tag    
    var defaultNewTagValue;
    var focusColor = '#000';
    var blurColor = '#999';
    
    $('form.add_tag')
        .submit(function() {
            var id = $(this).parents(".scheme").attr("id");
            var tagInput = $('input.new_tag', this);
            var tags = tagInput.val();
            var tagsContainer = $(this).siblings(".tags");
            var toggleLink = tagsContainer.children("a.toggle_add_tag");
            
            if ((tagInput.val() != "") && (tagInput.val() != defaultNewTagValue)) {
                $.ajax({
                    type: "POST",
                    url: postUrl,
                    data: "id=" + id + "&addtags=" + tags,
                    dataType: "json",
                    error: function() {
                        alert("Error adding tag");
                    },
                    success: function(json) {
                        $.each(json, function() {
                            toggleLink.before(this.toString());
                        });
                        
                        tagInput.select();
                    }
                });
            }
            else {
                alert("Please enter a new tag to add.");
            }
            
            return false;
        });
    
    //default tag value
    $("input.new_tag").each(function(i) {
        defaultNewTagValue = this.value;
        this.style.color = blurColor;
        $(this).focus(function() {
            if (this.value == defaultNewTagValue) {
                this.value = "";
                this.style.color = focusColor;
            }
        }).blur(function() {
            if ($.trim(this.value) == "") {
                this.style.color = blurColor;
                this.value = defaultNewTagValue;
            }
        });
    });

});