$(document).ready(function() {

/* TODO: get jquery color plugin */

    $('.img-over').hide();

    $('.ks-boxes a')
        .mouseover(function() {
            
            //console.log($(this).children('div').css('background-color'))
            
            //$(this).children('div').animate({backgroundColor: '#b7b7b7'}, {duration: 500});
            //$(this).children('div').css('background-color', '#b7b7b7');
            
            if($(this).find('img').length < 2) return;  //in-progress ... remove when all assets are in place 
            
            //$(this).find('img').hide();
            
            //var img = $(this).find('img')[0];
            //$(img).css('position', 'absolute');
            
            $(this).find('.img-over').show();
            //$(this).find('.img-over').show().css('opacity', 0).animate({opacity:'1'});
            //$(this).find('.img-over').css('opacity', 0).fadeIn();

        }).mouseout(function() {
            
            //$(this).find('img').show();
            $(this).find('.img-over').hide();
            
            //$(this).children('div').animate({backgroundColor: 'transparent'}, {duration: 500});    
        });



    if($('#body_index').length > 0) {
        
        // load the hp xml
    	$.ajax({
             type: "GET",
             url: "xml/waf.xml",
             dataType: "xml",
             success: onXmlLoad
         });
         
    } else {
        
        //other page specific jobs
        
    }
    
    var FADE_DUR = 300;
    
    var _boxes;
    var _heroIndex = -1;
    
    var _sectId = $('body').attr('id');
    _sectId = _sectId.slice(5,_sectId.length);  // body_{section}
    
    
    function onXmlLoad(xml) {
        _boxes = [];
        
        var b;
        
        $(xml).find('hero').each(function() {
            
            b = {};
            
            //add grid info as well to xml? 
            
            b.image = $(this).find('image').attr('src');
            b.title = $(this).find('title').text();
            b.subtitle = $(this).find('subtitle').text();
            b.desc = $(this).find('desc').text();
            b.creator = $(this).find('creator').text();
            b.price = $(this).find('price').text();
            
            _boxes.push(b);
         });
    }

    //set the nav bar selected item and mouseover behavior for all
    $('#nav_bar a').each(function() {
        //var link = $(this).children('a')[0];
        var link = $(this);
        var href = $(link).attr('href');
        
        //console.log('nav href '+ href + ', ' + _sectId)
        
        if(href.indexOf(_sectId) >= 0) {
            $(this).children('li').addClass('selected');
        } else {
            $(this).children('li').append(' <img src="images/nav-item-arrow.gif"/>');
        }
        
        $(link)
            .mouseover(function() {
                if(!$(this).children('li').hasClass('selected')) {
                    //$(this).css('color', '#c3c3c3')  
                    $(this).children('li').animate({color: '#737373'}, {duration: 300});
                }
            })
            .mouseout(function() {
                if(!$(this).children('li').hasClass('selected')) {
                    //$(this).css('color', 'black')    
                    $(this).children('li').animate({color: '#000'}, {duration: 400});
                }
            });
    });


    // Homepage
    $('.ks-hero').hide();
    
    $('.ks-boxes a').click(function(e) {
        e.preventDefault();
    
        //get the id and load the hero to ks-hero template
        var bi = $(this).attr('rel');
        
        loadHero(Number(bi)-1);
        showBoxHero();
    });
    
    $('#hero_close a').click(function(e) {
        e.preventDefault();
        hideBoxHero();
    });
    
    
    // 'More' article links
    $('a.more-link').click(function(e) {
        var moreId = $(this).attr('href');
        $(moreId).show();
        $(this).hide();
    });
    
    
    
    $('#hero_nav a').click(function(e) {
        var ni = _heroIndex + (1 * ($(this).attr('rel') == "prev" ? -1 : 1 ));
        if(ni >= _boxes.length) ni = 0;
        else if(ni < 0) ni = _boxes.length - 1;
        
        //hide current content
        $('#hero_image img').fadeOut(FADE_DUR);
        $('#hero_info').fadeOut(FADE_DUR, function() {
            loadHero(ni);
            $(this).fadeIn(FADE_DUR);
        });
        
        e.preventDefault();
    });
    
    
    function loadHero(hi) {
        _heroIndex = hi;
        var b = _boxes[_heroIndex];
        
        if(!b) {
            console.log("ERROR "+ _heroIndex);
            return;
        }
        
        $('#hero_image').html("<img height='700' src='"+b.image+"' style='display:none'/>");
        
        $('#hero_image img').bind('load', function() {
            $(this).fadeIn(FADE_DUR);
            //console.log('img load');
        })
        
        $('#hero_title').html('').append(b.title);
        $('#hero_subtitle').html('').append(b.subtitle);
        $('#hero_desc').html('').append(b.desc);
        $('#hero_creator').html('').append(b.creator);
        $('#hero_price').html('').append(b.price);
    }

    
    function showBoxHero() {
        //hide news feed?
        $('.ks-boxes').hide('slow');
        $('.ks-hero').show('slow');
        $('#news').hide();
    }
    function hideBoxHero() {
        $('.ks-boxes').show('slow');
        $('.ks-hero').hide('slow');
        $('#news').show();
    }

    
});