Element.addMethods({
  redraw: function(element){
    element = $(element);
    var n = document.createTextNode(' ');
    element.appendChild(n);
    (function(){n.parentNode.removeChild(n)}).defer();
    return element;
  }
});

function redrawFormReportElements() {
    $$('#elements .element').each(function(e) {
        e.redraw();
    });
}

function addElementButton_onclick(elementId, elementSimpleName, type) {
    var formId = 'addElementForm_' + elementId;
    var nodeId = 'element_' + elementId;
    $(formId).elementSimpleName.value = elementSimpleName;
    $(formId).type.value = type;
    var newNode = $(nodeId).cloneNode(false);
    newNode.id = nodeId + '_before';
    Element.insert($(nodeId), {before:newNode});
    newNode.addClassName("sortable");
}

function hideEmptyElementSpinners() {
    $$("#element_ .spinner").each(function(e) {
        Element.hide(e);
    });
}

function showPublishOption(option) {
    var tabId = option + "Tab";
    var detailId = option + "Details";
    $$("#formPublish .navItem").each(function(e) {
        e.removeClassName("active");
    });
    $$("#formPublish .details").each(function(e) {
        e.hide();
    });
    $(tabId).addClassName('active');
    new Effect.Appear($(detailId));
    return false;
}

function showThemePage(currentPage, direction) {
    var currentPageNode = $('themePage' + currentPage);
    var newPageNode = $('themePage' + (currentPage + direction));
    if (newPageNode) {
        currentPageNode.hide();
        newPageNode.show();
    }
}

function morph(selector, css, transparent) {
    $$(selector).each(function(item) {
        if (transparent)
            item.style.background = 'transparent';
        if (css)
            item.morph(css);
    });
    return false;
}

function set(selector, style, value) {
    $$(selector).each(function(item) {
        if (style == 'border-style')
            item.setStyle({'borderStyle':value});
        else if (style == 'font-style')
            item.setStyle({'fontStyle':value});
        else if (style == 'font-weight')
            item.setStyle({'fontWeight':value});
        else if (style == 'font-family')
            item.setStyle({'fontFamily':value});
    });
    return false;
}

function morphColor(iconName, fieldName, detailName, functionName, color, transparent) {
    $(iconName).style['background'] = '#' + color;
    $(fieldName).value = color;
    //$(detailName).hide();
    eval(functionName + "('#" + color + "', " + transparent + ")");
    return false;
//    ${function}('#' + color, transparent);
}

function morphPageBackground(value, transparent) {
    if (transparent) {
        return morph('#formStylePreview', null, transparent);
    }
    else {
        return morph('#formStylePreview', 'background:' + value);
    }
}

function morphFormBorderWidth(value) {
    return morph('#formStylePreviewBody', 'border-width:' + value);
}
function morphFormBorderStyle(value) {
    return set('#formStylePreviewBody', 'border-style', value);
}
function morphFormBorderColor(value) {
    return morph('#formStylePreviewBody', 'border-color:' + value);
}
function morphFormPadding(value) {
    return morph('#formStylePreviewBody', 'padding:' + value);
}
function morphFormBackground(value, transparent) {
    if (transparent) {
        return morph('#formStylePreviewBody', null, transparent);
    }
    else {
        return morph('#formStylePreviewBody', 'background:' + value);
    }
}

function morphTitlePadding(value) {
    return morph('#title h2', 'padding:0 0 ' + value + ' 0');
}
function morphTitleMargin(value) {
    return morph('#title', 'margin-bottom:' + value);
}
function morphTitleBackground(value, transparent) {
    if (transparent) {
        return morph('#title', 'padding-left:0; padding-right:0', transparent);
    }
    else {
        return morph('#title', 'padding-left:10px; padding-right:10px; background:' + value);
    }
}
function morphTitleColor(value) {
    return morph('#title h2', 'color:' + value);
}
function morphTitleFontSize(value) {
    return morph('#title h2', 'font-size:' + value);
}
function morphTitleFontFamily(value) {
    return set('#title h2', 'font-family', value);
}
function morphTitleFontStyle(value) {
    return set('#title h2', 'font-style', value);
}
function morphTitleFontWeight(value) {
    return set('#title h2', 'font-weight', value);
}

function morphElementsPadding(value) {
    var inputWidth = (445 - 2 * parseInt(value.substr(0, value.length - 2))) + "px";
    morph('.maxWidth', 'width:' + inputWidth);
    morph('.element textArea', 'width:' + inputWidth);
    morph('.elementBody', 'padding:' + value);
    return morph('.elementBody', 'width:' + inputWidth);
}
function morphElementsMargin(value) {
    return morph('#elements .element', 'margin-bottom:' + value);
}
function morphElementsBackground(value, transparent) {
    if (transparent) {
        return morph('#elements .element', null, transparent);
    }
    else {
        return morph('#elements .element', 'background:' + value);
    }
}

function morphElementsTitleMargin(value) {
    return morph('#elements .element h3', 'margin-bottom:' + value);
}
function morphElementsTitleColor(value) {
    return morph('#elements .element h3', 'color:' + value);
}
function morphElementsTitleFontSize(value) {
    return morph('#elements .element h3', 'font-size:' + value);
}
function morphElementsTitleFontFamily(value) {
    return set('#elements .element h3', 'font-family', value);
}
function morphElementsTitleFontStyle(value) {
    return set('#elements .element h3', 'font-style', value);
}
function morphElementsTitleFontWeight(value) {
    return set('#elements .element h3', 'font-weight', value);
}

function morphElementsDescriptionMargin(value) {
    return morph('#elements .element .description p', 'margin:' + value + " 0");
}
function morphElementsDescriptionColor(value) {
    return morph('#elements .element .description p', 'color:' + value);
}
function morphElementsDescriptionFontSize(value) {
    return morph('#elements .element .description p', 'font-size:' + value);
}
function morphElementsDescriptionFontFamily(value) {
    return set('#elements .element .description p', 'font-family', value);
}
function morphElementsDescriptionFontStyle(value) {
    return set('#elements .element .description p', 'font-style', value);
}
function morphElementsDescriptionFontWeight(value) {
    return set('#elements .element .description p', 'font-weight', value);
}

function morphFieldsLabelColor(value) {
    return morph('#elements .element label', 'color:' + value);
}
function morphFieldsLabelFontSize(value) {
    return morph('#elements .element label', 'font-size:' + value);
}
function morphFieldsLabelFontFamily(value) {
    return set('#elements .element label', 'font-family', value);
}
function morphFieldsLabelFontStyle(value) {
    return set('#elements .element label', 'font-style', value);
}
function morphFieldsLabelFontWeight(value) {
    return set('#elements .element label', 'font-weight', value);
}

function morphErrorBackground(value, transparent) {
    if (transparent) {
        return morph('#formStylePreview .error', 'padding-left:0; padding-right:0', transparent);
    }
    else {
        return morph('#formStylePreview .error', 'padding-left:10px; padding-right:10px; background:' + value);
    }
}
function morphErrorPadding(value) {
    return morph('#formStylePreview .error', 'padding:' + value);
}
function morphErrorMargin(value) {
    return morph('#formStylePreview .error', 'margin-top:' + value);
}
function morphErrorColor(value) {
    return morph('#formStylePreview .error', 'color:' + value);
}
function morphErrorFontSize(value) {
    return morph('#formStylePreview .error', 'font-size:' + value);
}
function morphErrorFontFamily(value) {
    return set('#formStylePreview .error', 'font-family', value);
}
function morphErrorFontStyle(value) {
    return set('#formStylePreview .error', 'font-style', value);
}
function morphErrorFontWeight(value) {
    return set('#formStylePreview .error', 'font-weight', value);
}