var currentStep = 1;
var themeChosen = false;

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

var currentStyle = 1;
var currentPage = 1;
var lastPage = 23;
var stylesPerPage = 5;

function applyTPStyle(style, el) {
    var stylePath = 'http://www.typepad.com/.shared/themes/' + style + '?.r='+Math.random();
    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;
        }
    }

    // if IE 7 and curves or hills, need to apply extra stylesheet
    if (document.all&&navigator.appVersion.indexOf("MSIE 7.")!=-1) {

        // alert(style.indexOf('curves'));
        if (style.indexOf('curves') == 11) {
            $('theme-base').setAttribute('href', 'http://www.typepad.com/.shared/themes/walt/theme-curves.css?.r='+Math.random());
        } else {
            $('theme-base').setAttribute('href', '');
        }
        
        // alert(style.indexOf('hills'));
        if (style.indexOf('hills') == 10) {
            $('theme-base').setAttribute('href', 'http://www.typepad.com/.shared/themes/vox/theme-hills.css?.r='+Math.random());
        } else {
            $('theme-base').setAttribute('href', '');
        }
    }

    // remove 'active' class from all other themes and add it to selected theme
    for (var j=0; j<112; j++) { // 100 is more than current amount of styles
        if ($('theme-' + j)) {
            $('theme-' + j).removeClass('active');
        }
    }
    var listItem = el.parentNode
    $(listItem).addClass('active');
    
    // make sure the page displays the sample blog
    var body = document.getElementsByTagName('body')[0];
    if ($(body).hasClass('fullscreen')) {
        $(body).removeClass('fullscreen');
        scroll(0,0);
    }

    var themeId = (el.parentNode.id);
    var temp = new Array();
    temp = themeId.split('-');
    currentPage = Math.ceil(temp[1] / stylesPerPage);
    currentPage--;
    nextStyles();

    $('final-theme').innerHTML = el.innerHTML;

    themeChosen = true;

    return false;

}

function changeLayout(layout, el) {
   var body = document.getElementsByTagName('body')[0];
   
   // layout-two-column-left
   // layout-two-column-right
   // layout-three-column
   // layout-three-column-right
   // layout-one-column
   
   // ph-main
   // ph-sidebar
   // ph-sidebar-1
   // ph-sidebar-2
   
    if (layout == 'layout-two-column-right') {
        $('alpha-inner').innerHTML = $('ph-main').innerHTML;
        $('beta-inner').innerHTML = $('ph-sidebar').innerHTML;
    } else if (layout == 'layout-two-column-left') {
        $('alpha-inner').innerHTML = $('ph-sidebar').innerHTML;
        $('beta-inner').innerHTML = $('ph-main').innerHTML;
    } else if (layout == 'layout-three-column') {
        $('alpha-inner').innerHTML = $('ph-sidebar-1').innerHTML;
        $('beta-inner').innerHTML = $('ph-main').innerHTML;
        $('gamma-inner').innerHTML = $('ph-sidebar-2').innerHTML;
    } else if (layout == 'layout-three-column-right') {
        $('alpha-inner').innerHTML = $('ph-main').innerHTML;
        $('beta-inner').innerHTML = $('ph-sidebar-1').innerHTML;
        $('gamma-inner').innerHTML = $('ph-sidebar-2').innerHTML;
    } else if (layout == 'layout-one-column') {
        $('alpha-inner').innerHTML = $('ph-main').innerHTML + $('ph-sidebar').innerHTML;
    }

    var layouts = new Array();
    layouts = $('layouts').childNodes;
    for (var i=0; i<layouts.length; i++) {
        layouts[i].className = '';
    }
    $(layout).addClass('active');
   
   body.className = layout;
   $('final-layout').innerHTML = $(layout).firstChild.innerHTML;
}



// 95 themes

function nextStyles() {
   var endStyle = currentPage * stylesPerPage;
   for (var i=1; i<=endStyle; i++) {
       if ($('theme-' + i)) {
           $('theme-' + i).style.display = 'none';
       }
   }
   
   
   for (var j=0; j<112; j++) { // 100 is more than current amount of styles
       if ($('theme-' + j)) {
           $('theme-' + j).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 ($('theme-' + j)) {
           $('theme-' + j).style.display = 'block';
       }
   }
   if (currentPage == 1) {
       $('theme-prev').style.display = 'none';
   } else {
       $('theme-prev').style.display = 'block';
   }
   if (currentPage == lastPage) {
       $('theme-next').style.display = 'none';
   } else {
       $('theme-next').style.display = 'block';
   }
}

function prevStyles() {
   var endStyle = currentPage * stylesPerPage;
   for (var i=currentStyle; i<=endStyle; i++) {
       if ($('theme-' + i)) {
           $('theme-' + 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 ($('theme-' + j)) {
           $('theme-' + j).style.display = 'block';
       }
   }
   if (currentPage == 1) {
       $('theme-prev').style.display = 'none';
   } else {
       $('theme-prev').style.display = 'block';
   }
   if (currentPage == lastPage) {
       $('theme-next').style.display = 'none';
   } else {
       $('theme-next').style.display = 'block';
   }
}


var classesToInclude = new Array('entry-header','entry-body','entry-footer-info', 'module-header', 'module-list-item');
var idsToInclude = new Array('banner-header','banner-description');

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;
}
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;
        $('final-css-step').style.display = 'block';
    }
}

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);"
    }

}

function showFinalCSS() {
    prompt("Copy and paste this:", $('final-css').value);
}

function allStyles() {
    var body = document.getElementsByTagName('body')[0];
    for (var j=0; j<112; j++) { // 112 is more than current amount of styles
        if ($('theme-' + j)) {
            $('theme-' + j).style.display = 'block';
        }
    }
    $(body).addClass('fullscreen');
}