(function(){
    
    var PIPE_HTML = "<div class='pipe'/>";
    var PIPE_HEIGHT = "75px";
    var USER_INPUT_DEFAULT = "(text or a website's URL)";
    
    var MINICLOUD_TYPES = {
        thinking : {
            template: "${TEXT}",
            default_values: {
                text: "Computer is thinking...omm <img class='dotted-loader' src='/images/pixel.gif' style='position:relative;bottom:5px;right:5px;' />"
            }
        },
        error: {
            template: "<div>${TEXT}&nbsp;&nbsp;<input type='button' class='button' value='${BUTTON_LABEL}'></div>",
            default_values: {
                text: "Sorry, we couldn't analyze the meaning of your text.",
                button_label: "Start New Query"
            }
        },
        finished : {
            template: "<div style='float:left;margin-right:15px'>copied URL on memory. do <strong>CTRL + V</strong> anywhere. <br/><a href='$URL'>$URL</a></div><div style='float:right;margin-top:14px'><input type='button' class='button' value='Start New Query'></div>",
            default_values: {}
        }
    }
    
    var timer, interval;
    
    $(document).ready(function(){
        var init = function() {
            setBehaviors();
            enableInputs($("#user-input-container1"))
        };
        
        var setBehaviors = function() {
            var onUserInputFocus = function() {
                if (this.value == USER_INPUT_DEFAULT) {
                    this.value = "";
                    $(this).html("");
                }
            }
            var onUserInputBlur = function() {
                if ($.trim(this.value) == "") {
                    this.value = USER_INPUT_DEFAULT;
                    $(this).html(this.value);
                }
            }
            $("#user_input").focus(onUserInputFocus).blur(onUserInputBlur);
            
            $("#user_input").keydown(function(e) {
                if ((e.keyCode == 13 || e.keyCode == 18) && $.trim($(this).val()).search(/http:\/\/|https:\/\//) == 0) {
                    e.stopPropagation();e.preventDefault();
                    $("#gimme_meaning").click();
                }
            })
            
            var onMeaningSubmit = function() {
                var user_input = $(".user-input-container:last").find("#user_input")[0];
                if (user_input.value == USER_INPUT_DEFAULT) {
                    user_input.focus();
                    return;
                }
                
                addMinicloud(".user-input-container:last", "thinking");
                disableInputs(".user-input-container:last");

                var tid = 1;
                if ($(".account-selector:last").length > 0) {
                    tid = $(".account-selector:last").val();
                } else if ($(".tree_radios input[type='radio']").length > 0) {
                    tid = $("input[checked=true]", ".tree_radios:last").attr('id').split('_')[1]
                }
                
                timer = new Date();
                $.ajax({
                    type: "POST",
                    url: "/api/categorizer/categorize",
                    data: jQuery.param({'text': user_input.value, 'tid':tid}),
                    dataType: 'json',
                    success: displayResults,
                    error: submitError
                }); 
            }
            $("#gimme_meaning").click(onMeaningSubmit);
            setButtonPressedStyles("#gimme_meaning");
            $(document).mouseup(function(){$("input.button").removeClass("pressed")});
        };
        
        var disableInputs = function(element) {
            $(element).find("input,textarea,select").addClass("disabled").attr({disabled:"disabled"}).blur();
        };
        
        var enableInputs = function(element) {
            $(element).find("input,textarea,select").removeClass("disabled").removeAttr("disabled");
        };
        
        var setButtonPressedStyles = function(element) {
            $(element).mousedown(function(){$(this).addClass("pressed")})
        };
        
        // cuando devuelve 500
        var submitError = function(xhr, status, error) {
            var replaces = xhr ? {'text': eval('(' + xhr.responseText + ')').message} : null;
            
            //if (new Date() - timer < 200) {
                setTimeout(function(){
                    displayError(replaces)
                }, 1000);
            //    return;
            //}
            //clearInterval(interval);
        }
        
        var stopLoader = function() {
            $(".dotted-loader").remove();
        }
        
        var displayError = function(replaces) {
            stopLoader();
            clearInterval(interval);
            addMinicloud(".minicloud:last", "error", "happy", replaces);
            
            $(".minicloud:last").find("input").click(function(){
                disableInputs(".minicloud:last");
                addUserInputContainer(".minicloud:last");
            });
        }
        
        var displayResults = function(data) {
            if (data.status == "error") {
                displayError({text: data.message || "An unexpected error occured. "});
                return;
            }
            
            if (new Date() - timer < 2000) {
                setTimeout(function(){displayResults(data)}, 100);
            } else {
                stopLoader();
                clearInterval(interval);
                addPipe($(".minicloud:last")).after(data.payload[0]);
                $(".cloud:last").scrollTo(1500, "swing");
                
                var onFeelingButtonClick = function(feeling) {
                    $.post("/api/categorizer/feedback", {rid:$(".cloud:last").attr("id"), feeling:feeling});
                    disableInputs(".cloud:last");
                    displayFinish(feeling);
                }
                
                $(".cloud:last").find("input.new_query").click(function(){addUserInputContainer(".cloud:last");});
                /*
                $(".cloud:last").find("input.agree").click(function(){onFeelingButtonClick("happy")});
                $(".cloud:last").find("input.disagree").click(function(){onFeelingButtonClick("sad")});
                */
                
                setButtonPressedStyles($(".cloud:last").find("input"));
                
                var onDetailsButtonClick = function(e) {
                    $(this).parent().slideUp(200);
                    $(this).parent().next().show('slow');
                    $(this).parent().next().click();
                    e.preventDefault();
                }
                $(".cloud:last").find(".details-button").click(onDetailsButtonClick);
            }
        };
        
        var displayFinish = function(feeling) {
            return;
            //TODO: Reemplazar los minicloud_types
            url = "http://meaningtool.com/" + $(".cloud:last").attr("id");
            copyToClipboard(url);
            MINICLOUD_TYPES["finished"] = MINICLOUD_TYPES["finished"].replace(/\$URL/g, url);
            
            addMinicloud(".cloud:last", "finished", feeling);
            $(".minicloud:last").find("input").click(function(){
                disableInputs(".minicloud:last");
                addUserInputContainer(".minicloud:last");
            });
            setButtonPressedStyles($(".minicloud:last").find("input"));
        };
        
        var addPipe = function(element) {
            var pipe = $(element).after(PIPE_HTML).next();
            pipe.animate({height:PIPE_HEIGHT});
            
            return pipe;
        };
        
        var addMinicloud = function(element, type, face, replaces) {
            type = type || "thinking";
            face = face || "thinking";
            
            var mc = $(".minicloud.base").clone().css({display:""}).removeClass("base");
            mc.find(".event").html(renderMinicloud(type, replaces)).addClass(type);
            mc.find("img").addClass(face);
            
            if (type == "finished") {
                mc.find("img").css({marginTop:"-5px"});
            } else if (type=="thinking") {
                var loadingText = MINICLOUD_TYPES[type]; //renderMinicloud(type, replaces);
                
                /*
                var loading = function() {
                    html = mc.find(".event").html();
                    if (html == loadingText + "...")
                        html = loadingText;
                        
                    mc.find(".event").html(html+".");
                }
                interval = setInterval(loading, 1000);
                */
            }
            
            addPipe(element).after(mc);
            $(mc).scrollTo(1500, "swing");
        };
        
        var renderMinicloud = function(type, replaces) {
            var default_values = MINICLOUD_TYPES[type].default_values;
            if (replaces) {
                for (var k in default_values) {
                    replaces[k] = replaces[k] || default_values[k];
                }
            } else {
                replaces = default_values
            }
            
            var html = MINICLOUD_TYPES[type].template;
            for (var k in replaces) {
                var re = new RegExp("\\$\\{" + k.toUpperCase() + "\\}", "gi");
                html = html.replace(re, replaces[k]);
            }
            return html;
        }
        
        var addUserInputContainer = function(element) {
            var basic_uic = $(".user-input-container:last"),
                uic = basic_uic.clone(true)[0],
                timestamp = new String(new Date().getTime());
            
            var checked_radio = basic_uic.find("input[type=radio][checked]").val();
            $("input:radio, label", basic_uic).removeAttr("id");
            $("input:radio", uic).attr("name", "selected_tree_" + timestamp);
            
            // HACK: for webkit based browsers, cloned radios are not checked
            if ($("input:checked", uic).length == 0) {
                $("input:radio", uic).eq(0).attr("checked", "checked");
            }
            
            enableInputs(uic);
            
            $(uic).find(".account-selector").val(basic_uic.find(".account-selector").val());
            addPipe(element).after(uic);
            $(uic).scrollTo(1500, "swing");
            
            var input = $(uic).find("#user_input")[0];
            input.value = USER_INPUT_DEFAULT;
            //input.focus();
        };
        
        var copyToClipboard = function(text) {
            if (window.clipboardData) {
                window.clipboardData.setData("Text", text);
            } else {
                var embed = '<embed src="/flash/clipboard.swf" FlashVars="clipboard='+ text +'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
                $("#clipboard").html(embed);
            }
        }
        
        init();
    });
})();