var sections = [
    'portfolio',
    'approach',
    'background',
    'awards',
    'connect'
];

var completed_projects = {
    'bungalow i' : [ 
        'img/bungalow_i/DSC00387.jpg', 
        'img/bungalow_i/CS_Liv2.jpg', 
        'img/bungalow_i/CS_Kit2.jpg', 
        'img/bungalow_i/CS_Loft2.jpg', 
        'img/bungalow_i/DSC00388.jpg' 
    ],
    'bungalow ii' : [
        'img/bungalow_ii/IMG_1237.jpg',
        'img/bungalow_ii/IMG_1270.jpg',
        'img/bungalow_ii/IMG_2763.jpg',
        'img/bungalow_ii/IMG_1264.jpg',
        'img/bungalow_ii/IMG_1247.jpg'
    ],
    'toy box' : [
        'img/toy_box/DSC00007.jpg', 
        'img/toy_box/DSC00119.jpg', 
        'img/toy_box/Garage_Ext.jpg', 
        'img/toy_box/IMG_0113.jpg', 
        'img/toy_box/IMG_0123.jpg'
    ],
    'english tradition' : [
        'img/english_tradition/DSC00107.jpg',
        'img/english_tradition/DSC00120.jpg',
        'img/english_tradition/DSC00125.jpg',
        'img/english_tradition/DSC00131.jpg',
        'img/english_tradition/DSC00139.jpg'
    ],
    'santa fe' : [
        'img/santa_fe/arborview.jpg',
        'img/santa_fe/arborview2.jpg',
        'img/santa_fe/chimney.jpg',
        'img/santa_fe/shadecovers.jpg',
        'img/santa_fe/windchimes.jpg'
    ],
    'equestrian estate' : [
        'img/equestrian_estate/Panorama_1.jpg',
        'img/equestrian_estate/Panorama_2.jpg',
        'img/equestrian_estate/Panorama_3.jpg'
    ],
    'woodside i' : [
        'img/woodside_i/carter_kit_dine_to_sink.jpg',
        'img/woodside_i/carter_kit_to_fridg.jpg',
        'img/woodside_i/carter_kit_from_liv_rm.jpg',
        'img/woodside_i/carter_porch_to_front.jpg',
        'img/woodside_i/carter_ext_to_rear.jpg',
        'img/woodside_i/carter_porch_to_arch.jpg',
        'img/woodside_i/carter_ext_from_yard_after.jpg',
        'img/woodside_i/carter_wet_bar.jpg'
    ],
    'woodside ii' : [
        'img/woodside_ii/DSC00813.jpg',
        'img/woodside_ii/IMG_1700.jpg',
        'img/woodside_ii/IMG_1706.jpg',
        'img/woodside_ii/DSC00828.jpg',
        'img/woodside_ii/DSC00808.jpg'
    ],

    'suburban deck' : [
        'img/suburban_deck/TylerDeck4.jpeg.jpg',
        'img/suburban_deck/TylerDeck2.jpeg.jpg',
        'img/suburban_deck/TylerDeck3.jpeg.jpg',
        'img/suburban_deck/TylerDeck1.jpeg.jpg'
    ]
};


var on_the_boards = {
    'project i' : [
        'img/project_i/Bungalow.jpg',
        'img/project_i/Bunn.jpg'
    ],
    'project ii' : [
        'img/project_ii/Kocsis_Axon.jpg',
        'img/project_ii/Kocsis_copy.jpg'
    ],
    'project iii' : [
        'img/project_iii/Perspective4_Kazanjian.jpg'
    ]
};

var nav1_click = function(){

    // cascade all the way down the navigation tree showing defaults

    $('.nav1').removeClass('nav1_on');
    $(this).removeClass('nav1_hover');
    $(this).addClass('nav1_on');

    section_id = $(this).attr('id').replace('nav1_','');

    $('.nav2').hide();
    $('#nav2_' + section_id).show();

    $('.main').hide();
    $('#' + section_id).show();

}
var nav1_focus = function(){
    if ( ! $(this).hasClass('nav1_on' ) ){
        $(this).addClass('nav1_hover');
    }
}
var nav1_blur = function(){
    $(this).removeClass('nav1_hover');
}


var nav3_click = function(){

    // mark this nav element as active
    $('.nav3').removeClass('nav3_on');
    $(this).removeClass('nav3_hover');
    $(this).addClass('nav3_on');


    // remove all existing nav4 elements
    $('.nav4').remove();

    // which project?
    proj = $(this).attr('id').replace('nav3_','');
    project = completed_projects[proj]
    source = 'completed_projects';

    // could be on the boards?
    if ( ! project ) {
        project = on_the_boards[proj];
        source = 'on_the_boards';
    }

    // build the nav4 elements for this project    
    for ( index in project ){
        img_path = project[index]
        $('#portfolio_views').append( "<div class='nav4' img_path='" +img_path+ "' id='nav4_" +index+ "'></div>" );
    }

    // position the #views_word
    height = ( project.length -1 ) * 18
    $("#view_word").css( 'bottom', height + 'px' );
    // add nav4 events
    $(".nav4").click(nav4_click);
    $(".nav4").hover(nav4_focus, nav4_blur);    

    // click the default one
    $('.nav4:first').trigger('click');

}
var nav3_focus = function(){
    if ( ! $(this).hasClass('nav3_on' ) ){
        $(this).addClass('nav3_hover');
    }
}
var nav3_blur = function(){
    $(this).removeClass('nav3_hover');
}


var nav4_click = function(){
    $('.nav4').removeClass('nav4_on');
    $(this).removeClass('nav4_hover');
    $(this).addClass('nav4_on');

    // get the img_path
    img_path = $(this).attr('img_path')

    // set the current image
    $('#portfolio').html("<img src='"+img_path+"' />")
}
var nav4_focus = function(){
    if ( ! $(this).hasClass('nav4_on' ) ){
        $(this).addClass('nav4_hover');
    }
}
var nav4_blur = function(){
    $(this).removeClass('nav4_hover');
}


function build_portfolio() {

    $('#nav2_portfolio')
    $('#completed_projects')
    $('#on_the_boards')

    // build the project menu
    for (project in completed_projects){
        $('#completed_projects').append("<div class='nav3' id='nav3_" +project+ "'>" +project+ "</div>");
    }
    for (otb in on_the_boards){
        $('#on_the_boards').append("<div class='nav3' id='nav3_" +otb+ "'>" +otb+ "</div>");
    }

    // add events to the project menu
    $('.nav3').hover(nav3_focus, nav3_blur);
    $('.nav3').click(nav3_click);

    // click on the first nav3 menu item
    $('.nav3:first').trigger('click');
    

}


var setup_reve = function(){

    // add navigation events
    $(".nav1").hover(nav1_focus, nav1_blur);
    $(".nav1").click(nav1_click);

    build_portfolio();

    // click the first nav1 id
    $('.nav1:first').trigger('click');


}

var logo_click = function(){
    
    // move up to the top
    $('#title').css( 'padding-top', '0px' );
    
    // show everything
    $('#nav1').show();
    $('#nav2').show();
    $('#main').show();

    // logo click takes you to portfolio
    $('#logo').click( $('.nav1:first').trigger('click') );
}

var setup_title = function(){

    // hide everything but title
    $('#nav1').hide();
    $('#nav2').hide();
    $('#main').hide();

    // put title in the middle of the screen
    $('#title').css('padding-top', '200px');

    // setup logo click
    $('#logo').click(logo_click);
}

$(setup_reve);
$(setup_title);