$(document).ready(function(){  
    $('.slink').live('mouseover', function(){
        $(this).removeClass('blue').addClass('orange')
        $(this).css({'border-bottom' : '1px dotted #f26631'})
    })
    $('.slink').live('mouseout', function(){
        $(this).removeClass('orange').addClass('blue')
        $(this).css({'border-bottom' : '1px solid white'})
    })
    
    $('.button').live('mouseover', function(){
        if ($(this).hasClass('bg-blue')) {
            $(this).removeClass('bg-blue').addClass('bg-pink')
        }
        else if ($(this).hasClass('bg-orange')) {
            $(this).removeClass('bg-orange').addClass('bg-green')
        }
        else if ($(this).hasClass('bg-pink')) {
            $(this).removeClass('bg-pink').addClass('bg-blue')
        }
        else {
            $(this).removeClass('bg-green').addClass('bg-orange')
        }
    })
    $('.button').live('mouseout', function(){
        if ($(this).hasClass('bg-blue')) {
            $(this).removeClass('bg-blue').addClass('bg-pink')
        }
        else if ($(this).hasClass('bg-orange')) {
            $(this).removeClass('bg-orange').addClass('bg-green')
        }
        else if ($(this).hasClass('bg-pink')) {
            $(this).removeClass('bg-pink').addClass('bg-blue')
        }
        else {
            $(this).removeClass('bg-green').addClass('bg-orange')
        }
    })

    // Minogi box
    $('#minogiBoxBackground').live('click',function(){
        $('#minogiBox').fadeOut(300, function(){
            $('#minogiBoxBackground').fadeOut(200)
            $('#boxTitle').html("<div id=\'boxClose\'>"+
            $('#boxClose').html()+"</div>");
            $('#boxBody').html("");
        })
    })
    
    $('#boxClose').live('click',
        function(){
            $('#minogiBox').fadeOut(300, function(){
                $('#minogiBoxBackground').fadeOut(200)
                $('#boxTitle').html("<div id=\'boxClose\'>"+
                $('#boxClose').html()+"</div>");
                $('#boxBody').html("");
            })
        }
    )

    $(window).resize(function(){
        var topLocationCalc = 40-($('#minogiBox').height()/$(document).height()*100)/2;
        var leftLocationCalc = 50-($('#minogiBox').width()/$(document).width()*100)/2;

        var topLocation = topLocationCalc+"%"
        var leftLocation = leftLocationCalc+"%"

        $('#minogiBoxBackground').css({width: $(document).width()})
        $('#minogiBoxBackground').css({height: $(document).height()})

        $('#minogiBox').css({top: topLocation})
        $('#minogiBox').css({left: leftLocation})
    })
})

// minogiBox(title, body, width, height)
// inputs: title (the information that should go into the title),
//         body (the information that should go into the body),
//         width (the width of the minogi box),
//         height (the height of the minogi box)
// output: none
function minogiBox(title, body, width, height) {
    var topLocationCalc = 40-((height)/$(document).height()*100)/2;
    var leftLocationCalc = 50-(width/$(document).width()*100)/2;
    
    if (topLocationCalc < 0) {
        topLocationCalc = 10;
    }

    var topLocation = topLocationCalc+"%"
    var leftLocation = leftLocationCalc+"%"

    $('#boxTitle').html("<div style=\'float:left;\'>"+title+"</div>"+
            "<div id=\'boxClose\'>"+$('#boxClose').html()+"</div><div style=\'clear:both;\'></div>");
    $('#boxBody').html(body);

    $('#minogiBox').fadeIn(300)
    $('#minogiBox').css({width: width})
    $('#boxBody').css({height: height})
    $('#minogiBox').css({top: topLocation})
    $('#minogiBox').css({left: leftLocation})
    
    $('#minogiBoxBackground').show()
    $('#minogiBoxBackground').css({width: $(document).width(), height: $(document).height()})
}

// minogiBox()
// inputs: void
// output: void
function minogiBoxClose() {
    $('#minogiBox').fadeOut(100, function(){
        $('#minogiBoxBackground').css({"display": "none"})
        $('#boxTitle').html("<div id=\'boxClose\'>"+
        $('#boxClose').html()+"</div>");
        $('#boxBody').html("");
    })
}



