function showLayout(layout) {
    var body = document.getElementsByTagName('body')[0];
    var layouts = new Array('wtt', 'twt', 'wt', 'tw', 'wm', 'mw');
    
    for (var i=0;i<layouts.length;i++) {
        var current = layouts[i];
        // alert(current);
        if ($(current).hasClass('on')) {
            $(current).removeClass('on');
        }
    }
    $(layout).addClass('on');
    
    
    if ($(body).hasClass('layout-wtt')) {
        $(body).removeClass('layout-wtt');
    }
    if ($(body).hasClass('layout-twt')) {
        $(body).removeClass('layout-twt');
    }
    if ($(body).hasClass('layout-wt')) {
        $(body).removeClass('layout-wt');
    }
    if ($(body).hasClass('layout-tw')) {
        $(body).removeClass('layout-tw');
    }
    if ($(body).hasClass('layout-wm')) {
        $(body).removeClass('layout-wm');
    }
    if ($(body).hasClass('layout-mw')) {
        $(body).removeClass('layout-mw');
    }
    $(body).addClass('layout-' + layout);
    if (layout == 'wt' || layout == 'tw' || layout == 'wm' || layout == 'mw') {
        $('gamma').style.display = 'none';
    }
    if (layout == 'wtt' || layout == 'twt') {
        $('gamma').style.display = 'inline';
    }
    
    var layoutLabel;
    if (layout == 'wtt') {
        layoutLabel = '3-Columns, Wide, Thin, Thin';
    } else if (layout == 'twt') {
        layoutLabel = '3-Columns, Thin, Wide, Thin';
    } else if (layout == 'wt') {
        layoutLabel = '2-Columns, Wide, Thin';
    } else if (layout == 'tw') {
        layoutLabel = '2-Columns, Thin, Wide';
    } else if  (layout == 'wm') {
        layoutLabel = '2-Columns, Wide, Medium or layout-wm';
    } else if (layout == 'mw') {
        layoutLabel = '2-Columns, Medium, Wide or layout-mw';
    }
    
    $('final-layout').innerHTML = layoutLabel;
}


function showStructure(div) {
    var divs = new Array('header', 'footer', 'content', 'alpha', 'beta', 'gamma');
    for (var i=0;i<divs.length;i++) {
        $(divs[i]).removeClass('highlight');
    }
    $(div).addClass('highlight');
}

function showElements(classname) {
    var els =  $("container").elmsByClass(classname);
    for (var i=0;i<els.length;i++) {
        $(els[i]).addClass('highlight');
    }
}

var currentStep = 1;
var lastStep = 4;

function activeButton(currentStep) {
    if (currentStep <= 1) {
        $('help-prev').className = '';
    } else {
        $('help-prev').className = 'active';
    }
    if (currentStep == lastStep) {
        $('help-next').className = '';
    } else {
        $('help-next').className = 'active';
    }
}

function nextStep() {
    $('step-' + currentStep).style.display = 'none';
    currentStep++;
    $('step-' + currentStep).style.display = 'block';
    activeButton(currentStep);
}

function prevStep() {
    if (lastStep -= 2) {
        $('step-' + currentStep).style.display = 'none';
        currentStep--;
        $('step-' + currentStep).style.display = 'block';
        activeButton(currentStep);
    }
    
}

function pickStep(step) {
    $('step-' + currentStep).style.display = 'none';
    $('step-nav-' + currentStep).className = '';
    currentStep = step;
    $('step-' + currentStep).style.display = 'block';
    $('step-nav-' + currentStep).className = 'active';
    var body = document.getElementsByTagName('body')[0];
    if (step == '1' || step == '3') {
        $(body).addClass('fullscreen');
    } else {
        $(body).removeClass('fullscreen');
    }
    // activeButton(currentStep);
}

var currentDesignStep = 1;

function pickDesignStep(step) {
    $('design-' + currentDesignStep).style.display = 'none';
    $('design-nav-' + currentDesignStep).className = '';
    currentDesignStep = step;
    $('design-' + currentDesignStep).style.display = 'block';
    $('design-nav-' + currentDesignStep).className = 'active';

}

function addStyle(el) {
    var styles = $('new-styles');
    if (!styles) {
        styles = document.createElement('STYLE');
        styles.setAttribute( "id", "new-styles" );
        styles.setAttribute( "type", "text/css" );
        styles.setAttribute( "media", "screen" );
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(styles);
    } else {
        while ( styles.firstChild )
            styles.removeChild( styles.firstChild );
    }

    var newStyle = $( el );
    if ( styles.styleSheet )
        styles.styleSheet.cssText = newStyle.value;
    else
        styles.appendChild( document.createTextNode( newStyle.value ) );

    if ($('style-fonts').value != '/* add custom css here */') {
        $('final-css').value = $('style-fonts').value;
        $('finlist-css').style.display = 'block';
    }
}

function removeMTStyle() {

}

function applyMTStyle(style, el) {
    var stylePath = 'http://www.movabletype.org/design/styles/library/' + style + '/' + style + '.css?.r='+Math.random();
    // alert(stylePath);
    var styleSheet = document.getElementsByTagName('LINK');
    for (i=0;i<styleSheet.length;i++) {
        if (styleSheet[i].getAttribute('title') == 'theme') {
            styleSheet[i].setAttribute('href', stylePath);
            styleSheet[i].href = stylePath;
            break;
        }
    }
    $('final-style').innerHTML = el.innerHTML;
    return false;
}

function test() {
    
}

function reset() {
    if ($('theme-css')) {
        $('theme-css').href = ''; // resets mtstyle
    }
    if ($('new-styles')) {
        $('new-styles').innerHTML = ''; // resets additional styles
    }
    
    var highlighted = $('container').elmsByClass('highlight');
    for (var i=0; i<highlighted.length; i++) {
        highlighted[i].removeClass('highlight');
    }
    $('style-fonts').value = $('style-fonts').innerHTML;
    
}

function showWidgets() {
    var widgets = $('container').elmsByClass('widget');
    for (var i=0; i<widgets.length; i++) {
        $(widgets[i]).addClass('highlight');
    }
}

function hoverElements() {
    
}

function showClass(classname) {
    if (classname != '') {
        $('classes').value = '.' + classname;
    } else {
        $('classes').value = '';
    }
    
}

function showId(id) {
    if (id != '') {
        $('classes').value = '#' + id;
    } else {
        $('classes').value = '';
    }
    
}

function setCSS() {
    $('style-fonts').value = $('style-fonts').value + '\n' + $('classes').value + ' {' + '\n\n' + '}';
    $('style-fonts').scrollTop = $('style-fonts').scrollHeight;
}

var classesToInclude = new Array('entry-title','asset-meta','asset-body','widget-header','widget-content');
var idsToInclude = new Array('header-name','header-description');

function pageReset() {
    // alert(classesToInclude.length);
    for (var i=0; i<classesToInclude.length; i++) {
        var els = $('container').elmsByClass(classesToInclude[i]);
        // alert(entryTitles.length);
        for (var j=0; j<els.length; j++) {
            els[j].setAttribute("onmouseover","");
            els[j].setAttribute("onmouseout","");
            els[j].setAttribute("onclick","");
        }
    }
    for (var k=0; k<idsToInclude.length; k++) {
        $(idsToInclude[k]).setAttribute("onmouseover","");
        $(idsToInclude[k]).setAttribute("onmouseout","");
        $(idsToInclude[k]).setAttribute("onclick","");
    }
}

function pageSetup() {
    // alert(classesToInclude.length);
    for (var i=0; i<classesToInclude.length; i++) {
        var els = $('container').elmsByClass(classesToInclude[i]);
        // alert(entryTitles.length);
        for (var j=0; j<els.length; j++) {
            els[j].setAttribute("onmouseover","showClass('" + classesToInclude[i] +"'); $(this).addClass('highlight');");
            els[j].setAttribute("onmouseout","showClass(''); $(this).removeClass('highlight');");
            els[j].setAttribute("onclick","setCSS('" + classesToInclude[i] +"');");
        }
    }
    for (var k=0; k<idsToInclude.length; k++) {
        $(idsToInclude[k]).setAttribute("onmouseover","showId('" + idsToInclude[k] +"'); $(this).addClass('highlight');");
        $(idsToInclude[k]).setAttribute("onmouseout","showId(''); $(this).removeClass('highlight');");
        $(idsToInclude[k]).setAttribute("onclick","setCSS('" + idsToInclude[k] +"');");
    }
    var allLinks = document.getElementsByTagName('A');
    for (var m=0; m<allLinks.length; m++) {
        allLinks[m].href = "javascript:void(0);"
    }

}

var currentStyle = 1;
var currentPage = 1;
var lastPage = 10;
var stylesPerPage = 4;

function nextStyles() {
    var endStyle = currentPage * stylesPerPage;
    for (var i=1; i<=endStyle; i++) {
        if ($('style-' + i)) {
            $('style-' + i).style.display = 'none';
        }
    }
    currentStyle = (stylesPerPage * currentPage) + 1;
    currentPage++;
    var endStyle = currentPage * stylesPerPage;
    
    // alert('current:' + currentStyle + ' - ' + currentPage + ' - ' + ' - ' + endStyle);
    for (var j=currentStyle; j<=endStyle; j++) {
        if ($('style-' + j)) {
            $('style-' + j).style.display = 'block';
        }
    }
    if (currentPage == 1) {
        $('style-prev').style.display = 'none';
    } else {
        $('style-prev').style.display = 'block';
    }
    if (currentPage == lastPage) {
        $('style-next').style.display = 'none';
    } else {
        $('style-next').style.display = 'block';
    }
}

function prevStyles() {
    var endStyle = currentPage * stylesPerPage;
    for (var i=currentStyle; i<=endStyle; i++) {
        if ($('style-' + i)) {
            $('style-' + i).style.display = 'none';
        }
    }
    currentPage--;
    currentStyle = currentStyle - stylesPerPage;
    // alert(currentPage);
    // currentStyle = (stylesPerPage * currentPage) + 1;

    var endStyle = currentPage * stylesPerPage;
    for (var j=currentStyle; j<=endStyle; j++) {
        if ($('style-' + j)) {
            $('style-' + j).style.display = 'block';
        }
    }
    if (currentPage == 1) {
        $('style-prev').style.display = 'none';
    } else {
        $('style-prev').style.display = 'block';
    }
    if (currentPage == lastPage) {
        $('style-next').style.display = 'none';
    } else {
        $('style-next').style.display = 'block';
    }
}

function clipBoard() {
    CopiedTxt = document.selection.createRange();
    CopiedTxt.execCommand("Copy");
}