var FormEnhancements = 
{
    init: function() {
        // add event listener to username input field
        var forms = document.getElementsByTagName("input");
        for(var i = 0; i<forms.length; i++) {
            if(forms[i].name == 'gamertag') {
                Core.addEventListener(forms[i], "change", FormEnhancements.carryGamertag);
            }
        }
        
        var inputs = document.getElementsByTagName("input");
        for(var i = 0; i < inputs.length; i++) {
            if(Core.hasClass(inputs[i],'codeSelect')) {
                Core.addEventListener(forms[i], "focus", FormEnhancements.doSelection);
            }
        }
    },
    
    
    carryGamertag: function(event) {
        var forms = document.getElementsByTagName("input");
        for(var i = 0; i<forms.length; i++) {
            if(forms[i].name == 'username') {
                forms[i].value = this.value;
            }
        }
    },
    
    doSelection: function(event) {
        this.select();
    }
    
};
Core.start(FormEnhancements);

var ElementCreatorForms =
{   
    init: function() {
        if(!document.getElementById("gamercardBg")) {
            return false;
        }
        
        // add element button listener
        var addElementButton = document.getElementById("addElementButton");
        Core.addEventListener(addElementButton, "click", ElementCreatorForms.setupForm);
        
        Core.addEventListener(getId("saveElements"), "click", ElementForms.saveEverything);
        
        Core.addEventListener(getId("saveAndFinish"), "click", ElementForms.saveAndFinish);
    },
    
    setupForm: function(event) {
        Core.preventDefault(event);
        if(Core.getElementsByClass("aLayer").length >= 20) {
            return alert("You've reached the limit of 20 elements per gamercard image.");
        }
        var els = getId("templatesContainer").getElementsByTagName("div");

        var options = document.getElementsByTagName("select")[0].options;
        for(var i = 0; i < options.length; i++) {
            if(options[i].selected == true) {
                var theType = options[i].value;
            }
        }
        var theDiv = getId(theType + "_template")
        ElementForms.addLayer(theDiv);
    }
};

Core.start(ElementCreatorForms);

var GeneralForms = {
    resetSelect: function(select) {
        var options = select.options;
        for(var i = 0; i < options.length; i++) {
            options[i].selected = false;
        }
    }
};

var ElementForms = {
    init: function() {
        if(getId("layers")) {
            ElementForms.stripeIt();
            ElementForms.reloadLayers();
        }
        
        if(getId("gamercardBg")) {
            // make listener to revert loading icon to the image whenever it loads
            Core.addEventListener(getId("gamercardBg"), "load", ElementForms.gamercardBgLoad);
            
        }
        
    },
    
    addLayer: function(template,values) {
        // find the template div that is activated
        
        if(typeof values == "undefined") {
            var useValues = false;
        } else {
            var useValues = true;
        }
        
        var div = document.createElement("div");
        Core.addClass(div,'aLayer');
        div._template = template;
        
        var temp = template.id.split('_');
        var type = temp[0];
        
        div.innerHTML = template.innerHTML;
        
        if(useValues == true) {
            div._num = values['number'];
            getId("layers")._biggestNum = div._num;
        } else {
            if(document.getElementById("layers")._biggestNum) {
                div._num = Number(getId("layers")._biggestNum) + 1;
                getId("layers")._biggestNum = div._num;
            } else {
                div._num = 1;
                getId("layers")._biggestNum = 1;
            }
        }
        div._type = type;
        
        var inputs = div.getElementsByTagName("input");
        for(var i = 0; i<inputs.length; i++) {
            if(useValues == true && (typeof values[inputs[i].name] != 'undefined')) {
                inputs[i].value = values[inputs[i].name];
                if(inputs[i].name == "hex_color") {
                    inputs[i].parentNode.getElementsByTagName("span")[0].style.background = inputs[i].value; // set background color of the color preview
                }
            }
            inputs[i].name = inputs[i].name + "[" + div._num + "]";
            inputs[i]._layer = div;
            if(inputs[i].type == "checkbox" && Core.hasClass(inputs[i],'deleter')) {
                Core.addEventListener(inputs[i], 'click', ElementForms.deletedBackground);
            }
            if(Core.hasClass(inputs[i],'hexColorPicker')) {
                attachColorPicker(inputs[i],0);
                Core.addEventListener(inputs[i], 'change', ElementForms.transferColor);
            }
        }
        
        if(useValues == true) {
            var selects = div.getElementsByTagName("select");
            for(var i = 0; i<selects.length; i++) {
                if(typeof values[selects[i].name] != 'undefined') {
                    var options = selects[i].getElementsByTagName("option");
                    for(var x = 0; x<options.length; x++) {
                        
                        if(options[x].value == values[selects[i].name]) {
                            selects[i].selectedIndex = options[x].index;
                            options[x].selected = true;
                        } else {
                            options[x].selected = false;
                        }
                    }
                }
            }
        }
        
        if(type == "text") {
            var buttons = div.getElementsByTagName('button');
            for(var i = 0; i < buttons.length; i++) {
                if(Core.hasClass(buttons[i],'textReplace')) {
                    Core.addEventListener(buttons[i],'click',ElementForms.textReplace);
                }
            }
            
            
            var babyAs = div.getElementsByTagName("a");
            for(var i = 0; i < babyAs.length; i++) {
                if(Core.hasClass(babyAs[i],'fontsDisplay')) {
                    Core.addEventListener(babyAs[i],'click',ElementForms.showFonts);
                }
            }
        }
        
        getId("layers").appendChild(div);
        ElementForms.stripeIt();
        //document.getElementsByTagName("form")[2].reset();
    },
    
    textReplace: function(event) {
        var mama = this.parentNode;
        
        // lets go searching for the select menu! Weeeeee! Yip! Yip! Hee-Haw!
        var selects = mama.getElementsByTagName("select");
        for(var i = 0; i<selects.length; i++) {
            if(Core.hasClass(selects[i],'textReplace')) {
                var index = selects[i].selectedIndex;
                var option = selects[i].options[index];
                var code = option.value;
                GeneralForms.resetSelect(selects[i]);
                break;
            }
        }
        
        var inputs = mama.getElementsByTagName("input");
        for(var i = 0; i<inputs.length; i++) {
            if(Core.hasClass(inputs[i],'kindaBig')) {
                inputs[i].value += "%" + code + "%";
            }
        }
        Core.preventDefault(event);
    },
    
    showFonts: function(event) {
        Core.preventDefault(event);
        
        
        // check to see if the font picker is already there
        // if it is get rid of that bitch
        var babies = this.childNodes;
        for(var i = 0; i < babies.length; i++) {
            if(Core.hasClass(babies[i], 'fontPicker')) {
                this.removeChild(babies[i]);
                document.documentElement.style.position = "static";
                return;
            }
        }
        
        // create the picker span
        var picker = document.createElement("span");
        picker._layer = this.parentNode;
        Core.addClass(picker,'fontPicker');
        
        var text = document.createTextNode("Testing... 1. 2. 3.");
        picker.appendChild(text);
        
        // find the fonts
        /*var selects = picker._layer.getElementsByTagName("select");
        for(var i = 0; i < selects.length; i++) {
            if(Core.hasClass(selects[i], 'selectFont')) {
                // this is it
                var options = selects[i].options;
                break;
            }
        }*/
        
        
        // setup images using the fonts we found
        /*for(var i = 0; i < options.length; i++) {
            var newImage = document.createElement('img');
            newImage.src = "fontpreview.php?f=" + options[i].value;
            newImage.alt = options[i].value + ' Preview';
            newImage.border = 0;
            //Core.addClass(newImage, 'fontImage');
            Core.addEventListener(newImage, 'click', ElementForms.updateFont);
            picker.appendChild(newImage);
        }*/
        
        // add the picker. sexy.
        this.appendChild(picker);
        document.documentElement.style.position = "relative";
        
    },
    
    updateFont: function(event) {
        var layer = this.parentNode.parentNode.parentNode;
        
        var source = this.src;
        var font = source.replace(/.+=(.+)$/,"$1");
        
        var selects = layer.getElementsByTagName("select");
        for(var i = 0; i < selects.length; i++) {
            if(Core.hasClass(selects[i], 'selectFont')) {
                var options = selects[i].options;
                break;
            }
        }
        
        for(var i = 0; i < options.length; i++) {
            if(options[i].value == font) {
                options[i].selected = true;
            } else {
                options[i].selected = false;
            }
        }
    },
    
    deletedBackground: function(event) {
        ElementForms.stripeIt();
    },
    
    saveEverything: function(event,finish) {
    
        Core.preventDefault(event);
        
        //alert(typeof finish);

        
        var templatehash = getId('gamercardBg').src;
        templatehash = templatehash.replace(/.+=([A-z0-9]+)&.+/,"$1");
        var data = "hash=" + templatehash;
        
        if(finish == null) {
            finish = 0;
            data = data + "&finish=false";
        }
        if(finish == 1) {
            data = data + "&finish=true";
        }
        
        //alert(data);
    
        var layers = getId("layers");
        var layerDivs = Core.getElementsByClass("aLayer");
        for(var i = 0; i<layerDivs.length; i++) {
            var deleteThis = false;
            data += "&type[" + layerDivs[i]._num + "]=" + layerDivs[i]._type;
            // grab inputs
            var inputs = layerDivs[i].getElementsByTagName("input");
            for(var x = 0; x<inputs.length; x++) {
                if(inputs[x].type == "checkbox") {
                    if(inputs[x].checked != true) {
                        continue;
                    }
                    if(Core.hasClass(inputs[x], 'deleter')) {
                        deleteThis = true;
                    }
                }
                data += "&" + inputs[x].name + "[" + layerDivs[i]._num + "]=" + inputs[x].value;
            }
            //alert(data);
            var selects = layerDivs[i].getElementsByTagName("select");
            for(var x = 0; x<selects.length; x++) {
                var index = selects[x].selectedIndex;
                if(index >= 0) {
                    //alert(index + " is the index");
                    var option = selects[x].options[index];
                    //alert(option);
                    data += "&" + selects[x].name + "[" + layerDivs[i]._num + "]=" + option.value;
                    //data += "&" + selects[x].name + "[" + layerDivs[i]._num + "]=potatoes";
                    //alert(data);
                }
            }
            if(deleteThis == true) {
                getId("layers").removeChild(layerDivs[i]);
            }
        }
        
        // before we send the request let's change it to the loading icon!
        //Core.addClass(getId('gamercardBg'),'gamercardBgLoading');
        getId('gamercardBg').style.display = 'none';
        getId('gamercardBgLoading').style.display = 'block';
        getId('gamercardWorkspace').style.background = 'none';
        
        var req = createRequest();
        req.open("POST", "ajax-save-elements.php", true);
        req.onreadystatechange = function() {
            if(req.readyState == 4 && req.status == 200) {
                //Core.removeClass(getId('gamercardBg'),'gamercardBgLoading');

                getId("gamercardBg").src = 'preview.php?t=' + templatehash + '&d=' + new Date().getTime();
                
                if(req.responseText == "doit") {
                    // we gotta finish this bitch
                    var onRefreshConfirmListener = Core.addEventListener(getId("gamercardBg"), "load", ElementForms.confirmFinish);
                }
                //alert(req.responseText);
                //alert("k");
            }
        }
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //alert("Sent request");
        req.send(data);
        Core.preventDefault(event);
        ElementForms.stripeIt();
    },
    
    confirmFinish: function(event) {
        var userInput = confirm("Are you sure you want to finish this image? The preview of your image is exactly how it will look. It cannot be edited afterwards.");
        if(userInput) {
            document.getElementsByTagName("form")[document.getElementsByTagName("form").length-1].submit();
        }
                        
        Core.removeEventListener(getId("gamercardBg"), "load", ElementForms.confirmFinish);
    },
    
    saveAndFinish: function(event) {
        ElementForms.saveEverything(event,1);
        Core.preventDefault(event);
    },
    
    stripeIt:function() {
        var layers = Core.getElementsByClass('aLayer');
        for(var i = 0; i < layers.length; i++) {
            if(i%2 != 0) {
                Core.addClass(layers[i],'alt');
            } else {
                Core.removeClass(layers[i],'alt');
            }
            var inputs = layers[i].getElementsByTagName("input");
            for(var x = 0; x < inputs.length; x++) {
                if(Core.hasClass(inputs[x], 'deleter')) {
                    // this is it
                    if(inputs[x].checked == true) {
                        Core.addClass(layers[i], 'deleted');
                    } else {
                        Core.removeClass(layers[i], 'deleted');
                    }
                }
            }
        }
        
        // striping is done... now let's make sure theres something in the layers
        // we dont want the border to appear on nuthin
        
        if(layers.length > 0) {
            getId("layers").style.borderBottom = '1px #505050 solid';
        } else {
            getId("layers").style.borderBottom = '0';
       }
    },
    
    reloadLayers: function() {
        // hide layers and show loading icon
        var req = createRequest();
        req.open("POST", "ajax-load-layers.php", true);
        req.onreadystatechange = function() {
            if(req.readyState == 4 && req.status == 200) {
                var thexml = req.responseXML;
                var els = thexml.getElementsByTagName("element");
                for(var i = 0; i < els.length; i++) {
                    //alert("We be here");
                    var el = els[i];
                    var type = el.getElementsByTagName("type")[0].firstChild.data;
                    var theValues = [];
                    for(var x = 0; x < el.childNodes.length; x++) {
                        if(el.childNodes[x].childNodes.length > 0) {
                            theValues[el.childNodes[x].tagName] = el.childNodes[x].firstChild.data;
                            //alert(el.childNodes[x].tagName + ' is set to ' + el.childNodes[x].firstChild.data);
                        }
                    }
                    ElementForms.addLayer(getId(type + '_template'),theValues);
                }
            }
        };
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        var templatehash = getId('gamercardBg').src;
        templatehash = templatehash.replace(/.+=([A-z0-9]+)&.+/,"$1");
        req.send("hash=" + escape(templatehash));
    },
    
    gamercardBgLoad: function(event) {
        getId('gamercardBgLoading').style.display = 'none';
        getId('gamercardWorkspace').style.background = 'url(checkers.png) repeat';
        getId('gamercardBg').style.display = 'block';
    },
    
    transferColor: function(event) {
        var color = this.value;
        var span = this.parentNode.getElementsByTagName("span")[0];
        span.style.background = color;
    }
}

Core.start(ElementForms);

var MouseCoordinates = {
    
    init: function() {
        //Core.addEventListener(getId('gamercardBg'), 'mouseover', MouseCoordinates.mouseOverListener);
        if(getId('gamercardBg')) {
            Core.addEventListener(getId('gamercardBg'), 'mouseout', MouseCoordinates.mouseOutListener);
        
            Core.addEventListener(getId('gamercardBg'), 'mousemove', MouseCoordinates.mouseMoveListener);
            
            Core.addEventListener(getId('gamercardBg'), 'click', MouseCoordinates.saveCurrent);
            
            // add custom prop to coordinates
            getId('coords')._saved = false;
        }
    },
    
    saveCurrent: function(event) {
        var coords = getId("coords");
        if(Core.hasClass(coords,'saved')) {
            Core.removeClass(coords,'saved');
            coords._saved = false;
        } else {
            Core.addClass(coords,'saved');
            coords._saved = true;
        }
    },
    
    mouseOutListener: function(event) {
        if(getId('coords')._saved == true) {
            return;
        }
        getId("coords-x").removeChild(getId("coords-x").firstChild);
        var txt = document.createTextNode("--");
        getId("coords-x").appendChild(txt);

        getId("coords-y").removeChild(getId("coords-y").firstChild);
        var txt = document.createTextNode("--");
        getId("coords-y").appendChild(txt);
    },
    
    mouseMoveListener: function(event) {
        if(getId('coords')._saved == true) {
            return;
        }
        /*var x = event.clientX - this.X;
        var y = event.clientY - this.Y;*/
        if(event.offsetX) {
            var x = event.offsetX;
            var y = event.offsetY;
        } else {
            var x = event.layerX;
            var y = event.layerY;
        }
        
        getId("coords-x").removeChild(getId("coords-x").firstChild);
        var xcord = document.createTextNode(x);
        getId("coords-x").appendChild(xcord);
        
        getId("coords-y").removeChild(getId("coords-y").firstChild);
        var ycord = document.createTextNode(y);
        getId("coords-y").appendChild(ycord);
    }
}

Core.start(MouseCoordinates);

var myCards = {
    init: function() {
        var links = document.getElementsByTagName("a");
        for(var i = 0; i<links.length; i++) {
            if(Core.hasClass(links[i], 'deleteThisCard')) {
                Core.addEventListener(links[i], 'click', myCards.deleteCardConfirm);
            }
        }
    },
    
    deleteCardConfirm: function(event) {
        var doIt = confirm("Are you sure you want to delete that card? This action cannot be undone.");
        if(doIt == true) {
            //var url = links[i].href;
            //var hash = url.replace(/\?deleteIt=(.+)/,"$1");
            //alert(hash);
        } else {
            Core.preventDefault(event);
        }
    }
}

Core.start(myCards);