$(document).ready(function() {

    //set up cufon (if the page has it)
    if (typeof (Cufon) != 'undefined') {
        Cufon.replace('div.category-main-content p')
        Cufon.replace('div.newsletter-title h1');
        Cufon.replace('div.newsletter-item h1');
    }

    //initialize that nav, highlighting the proper item
    initializeNav();

    /*
    $("#header li a").hover(
    function () {
    $(this).append($("<span> &gt;</span>"));
    }, 
    function () {
    $(this).find("span:last").remove();
    }
    );
    */



    /***************************************************************************
    INITIALIZE LAYOUT
    ***************************************************************************/
    //alert($('body').attr('pages'));
    var imgs = $('body').attr('images');
    var category = $('body').attr('category');
    var section = $('body').attr('section');
    var heading = $('body').attr('heading');
    var pages = $('body').attr('pages'); //count of pages under this heading
    var pagenum = $('body').attr('pagenum'); //the number of the page we're on


    /*this manages the layout around the main body images.
    options are: 
    threespan = one image spanned across three columns, fileEnding = 111
    twospan = one image spanned across two columns, fileEnding = 11
    onetwo = one image per column for two columns, fileEnding = 1 or 2
    onetwothree = one image per colum for three columns, fileEnding = 1, 2 or 3
    */
    switch (imgs) {
        case 'onetwo':
            $('div.col-single img:first').attr('src', genImagePath(1));
            $('div.col-single img:last').attr('src', genImagePath(2));
            break;
        case 'onetwothree':
            $('div.col-single img:first').attr('src', genImagePath(1));
            $('div.col-single img:last').attr('src', genImagePath(2));
            $('div.col-text').removeClass('col-text').addClass('col-single').html('<img src=' + genImagePath(3) + ' />');
            break;
        case 'twospan':
            $('div.col-single img:first').attr('src', genImagePath(11));
            $('div.col-single:first').removeClass('col-single').addClass('col-twospan');
            $('div.col-single:last').remove();
            break;
        case 'threespan':
            $('div.col-single img:first').attr('src', genImagePath(111));
            $('div.col-single:first').removeClass('col-single').addClass('col-threespan');
            $('div.col-single:last').remove();
            $('div.col-text').remove();
            break;
        case 'twospanone':
            $('div.col-single img:first').attr('src', genImagePath(11));
            $('div.col-single:first').removeClass('col-single').addClass('col-twospan');
            $('div.col-single:last').remove();
            $('div.col-single img:first').attr('src', genImagePath(1));
            $('div.col-single img:last').attr('src', genImagePath(2));
            $('div.col-text').removeClass('col-text').addClass('col-single').html('<img src=' + genImagePath(3) + ' />');
            break;

    }

    /*this manages the numbering in the upper right corner
    <p>1</p> 
    <a href="2">2</a> 
    */
    if (pages > 1) {
        var htmlChunk = "";
        for (var i = 1; i <= pages; i++) {
            if (i == pagenum) {
                htmlChunk += '<p>' + pagenum + '</p>';
            }
            else {
                htmlChunk += '<a href=' + i + '>' + i + '</a>';
            }
        }
        $('#sub-nav-nums').html(htmlChunk);
    }

    /*this manages the display of the secondary and tertiary navs, as well as the page heading (top right corner)
    finds the nav node with the current section and yanks the a tag off, <del>and adds the > symbol</del>.
    */
    var secnav = $('div#secondary li a[href*=' + section + ']:first'); //:first is hack to solve issue where different paths match. At this point, grabbing the first works (but it's brittle).
    secnav.after(secnav.html()/* + ' &gt;'*/).remove();

    var tertnav = $('div#tertiary li a[href*=' + heading + ']:first'); //:first is a hack to fix /school/wash-house/back-wash/
    tertnav.after(tertnav.html()/* + ' &gt;'*/).remove();

    $('div#page-heading h1').html(tertnav.html()); //heading
    if (tertnav.length == 0) //if there is no 3rd level nav
        $('div#page-heading h1').html(secnav.html()); //heading


    /**LAYOUT HELPERS**/

    function genImagePath(fileEnding) {
        if (typeof (heading) != 'undefined') {
            return '/images/' + category
        + '/' + section + '/' + heading
        + '-' + pagenum + "-" + fileEnding + '.jpg';
        }
        else {
            return '/images/' + category
        + '/' + section + '-' + pagenum + "-" + fileEnding + '.jpg';
        }
    }





    /***************************************************************************
    TOP NAVIGATION
    ***************************************************************************/
    //company nav hover
    $('#nav-company').hover(
      function() {
          $(this).addClass('company-on');
          replaceClass($('#nav-school'), 'school-on', 'school')
          replaceClass($('#nav-salon'), 'salon-on', 'salon')
          replaceClass($('#nav-lunatic'), 'lunatic-on', 'lunatic')
          replaceClass($('#nav-portfolio'), 'portfolio-on', 'portfolio')
      },
      function() {
          $(this).removeClass('company-on');
          initializeNav();
      }
    );

    //lunatic nav hover
    $('#nav-lunatic').hover(
      function() {
          $(this).addClass('lunatic-on');
          replaceClass($('#nav-company'), 'company-on', 'company')
          replaceClass($('#nav-school'), 'school-on', 'school')
          replaceClass($('#nav-salon'), 'salon-on', 'salon')
          replaceClass($('#nav-portfolio'), 'portfolio-on', 'portfolio')
      },
      function() {
          $(this).removeClass('lunatic-on');
          initializeNav();
      }
    );


    //school nav hover
    $('#nav-school').hover(
      function() {
          $(this).addClass('school-on');
          replaceClass($('#nav-company'), 'company-on', 'company')
          replaceClass($('#nav-salon'), 'salon-on', 'salon')
          replaceClass($('#nav-lunatic'), 'lunatic-on', 'lunatic')
          replaceClass($('#nav-portfolio'), 'portfolio-on', 'portfolio')
      },
      function() {
          $(this).removeClass('school-on');
          initializeNav();
      }
    );

    //salon nav hover
    $('#nav-salon').hover(
      function() {
          $(this).addClass('salon-on');
          replaceClass($('#nav-company'), 'company-on', 'company')
          replaceClass($('#nav-school'), 'school-on', 'school')
          replaceClass($('#nav-lunatic'), 'lunatic-on', 'lunatic')
          replaceClass($('#nav-portfolio'), 'portfolio-on', 'portfolio')
      },
      function() {
          $(this).removeClass('salon-on');
          initializeNav();
      }
    );

    //design nav hover
    $('#nav-portfolio').hover(
      function() {
          $(this).addClass('portfolio-on');
          replaceClass($('#nav-company'), 'company-on', 'company')
          replaceClass($('#nav-school'), 'school-on', 'school')
          replaceClass($('#nav-salon'), 'salon-on', 'salon')
          replaceClass($('#nav-lunatic'), 'lunatic-on', 'lunatic')

      },
      function() {
          $(this).removeClass('portfolio-on');
          initializeNav();
      }
    );

    ;
})

//Helpers
function initializeNav(){
    if ($('body.school').size() > 0) { //if it's a school page
        replaceClass($('#nav-school'), 'school','school-on'); 
    }
    if ($('body.salon').size() > 0) {
        replaceClass($('#nav-salon'), 'salon','salon-on'); 
    }
    if ($('body.portfolio').size() > 0) {
        replaceClass($('#nav-portfolio'), 'portfolio', 'portfolio-on');
    }
    if ($('body.lunatic').size() > 0) {
        replaceClass($('#nav-lunatic'), 'lunatic', 'lunatic-on');
    }
    if ($('body.company').size() > 0) {
        replaceClass($('#nav-company'), 'company','company-on'); 
    }
}

function replaceClass(element, oldone, newone) { 
    if (element.size() > 0){
        element.removeClass(oldone).addClass(newone);
     }
     if ($(newone).size() == 0) {
        element.addClass(newone);
     }
}