// Global namespace
var TEjs = window.TEjs || {};

TEjs.TagPreviewManager = function() { 
    
    
    return {
        init : function(pid) {
        
            var variants = $(".ProductVariantLine");
            for (var v = 0; v < variants.length; v++) {
                var variantid = variants[v].getAttribute("id");
                var tprev = TEjs.TagPreview(variantid);
                tprev.init();
            } 
        }
    }
}();

TEjs.TagPreview = function(parentid) { 
    var lines = null;
    var bgimg = null;
    var ewidth = 220;
    var eheight = 110;
    var ecolor = "#ffffff";
    
    var onTextUpdate = function() {
        var newval = '';
        for (var i = 0; i < lines.length; i++) {
            if (newval != '' && lines[i].value != '')
                newval += '<br />';
            newval += lines[i].value;
        }
        $("#" + parentid + " #tagtext").html(newval);
        
        // reset font size
        resetFont();
    };

    var resetFont = function() {
        var size = 50;
        var j = 0;
        while (true) {
        
            $("#" + parentid + " #tagtext").css("font-size", size + "px");
            size--;
            if ($("#" + parentid + " #tagtext").width() <= ewidth && 
                $("#" + parentid + " #tagtext").height() <= eheight)
                break;
                
            j++;
            if (j > 50)
                break;
        }
    };
    
    var addTagPreview = function() {
        // append to lines[0].parent.parent
        $("#" + parentid + " .attributes").after("<div class=\"tagbg-wrapper\"><div class=\"tagbg-header\">Back of Tag / Engraving Preview</div><div class=\"tagbg\" style=\"background-image: url(" + bgimg.value + ")\"><table width=\"100%\" height=\"200px\" class=\"tagtextwrap\"><tr><td valign=\"middle\"><div id=\"tagtext\" class=\"tagtest\" style=\"color:" + ecolor + "\"></div></td></tr></table></div><div class=\"tagbg-footer\">Note: Engraving preview is approximate.<br />Actual font & size may be slightly different.</div></div><div style=\"clear: both\"></div>");
    };
    
    return {
        init : function() {
            //alert('init');
            
            var tinput = $("#" + parentid + " .taginput");
            if (tinput.length == 0)
                return;
                
            $("#" + parentid + " .taginput").keyup(onTextUpdate);
            lines = $("#" + parentid + " .taginput");
            bgimg = $("#" + parentid + " .tagengrave-background-img-url")[0];
            var tewidth = $("#" + parentid + " .tagengrave-background-img-ewidth")[0];
            var teheight = $("#" + parentid + " .tagengrave-background-img-eheight")[0];
            var tecolor  = $("#" + parentid + " .tagengrave-background-img-ecolor")[0];
            
            if (tewidth.value != '' && tewidth.value > 0)
                ewidth = tewidth.value;
            if (teheight.value != '' && teheight.value > 0)
                eheight = teheight.value;
            if (tecolor.value != '')
                ecolor = "#" + tecolor.value;
            
            if (lines.length > 0 && bgimg.value != '') {
                addTagPreview();
            }
        }
    }
};

$(document).ready(function(){
    TEjs.TagPreviewManager.init();
});