var _initialDocumentHeight = 0;
var _selectedQuake = null;
var _quakeFade = 0.33;
var _quakeFadeSelected = 0.9;
var _quakeDetailsWidth = 200;
var _quakeDetailsHeight = 85;
var _lastColor = null;

$(document).ready(function() {
    _initialDocumentHeight = $(window).height();
    renderEarthquakeBar();
});

function randomColor(val) {
    var color = null;
    var colors = new Array('158,1,66', '213,62,79', '244,109,67', '253,174,97', '254,224,139', '230,245,152',
        '171,221,164', '102,194,165', '50,136,189', '94,79,162'); // http://colorbrewer2.org

    do {
        color = 'rgb(' + colors[Math.floor(Math.random() * colors.length)] + ')';
    } while (color == _lastColor)

    _lastColor = color;
    return color;
}

function renderEarthquakeBar() {
    $.ajax({
        type: 'GET',
        url: 'http://notes.ericwillis.com/wp-content/themes/eric/earthquake.xml',
        cache: false,
        dataType: 'xml',
        success: function(xml) {
            var sidebar = $('#sidebar');
            var earthquakes = $('entry title', xml);
            var summaries = $('entry summary', xml);
            var quakeID = 0;

            earthquakes.each(function() {
                var earthquake = $(this).text().split(',');
                var magnitude = parseInt(earthquake[0].replace('M ', ''));
                var location = earthquake[1];

                if (sidebar.height() < _initialDocumentHeight) {
                    var summary = $(summaries.get(quakeID));
                    var summaryHtml = '<div' + summary.text() + '</div>';
                    var globeSrc = $('img', $(summaryHtml)).attr('src');
                    var globe = $(document.createElement('img'));

                    globe.attr('id', 'globe' + quakeID);
                    globe.attr('src', globeSrc);
                    globe.attr('alt', location);
                    globe.css('width', '100px');
                    globe.css('height', '100px');

                    // build quake item
                    var quake = $(document.createElement('div'));
                    var bgColor = randomColor(magnitude);
                    var barHeight = Math.ceil(magnitude * 10);

                    quake.attr('id', 'quake' + quakeID);
                    quake.addClass('quake');
                    quake.attr('title', location);
                    quake.css('height', barHeight + 'px');
                    quake.css('background-color', bgColor);

                    quake.click(function() {
                        if (_selectedQuake == this) {
                            _selectedQuake = null;
                            hideQuakeDetails();
                        }
                        else {
                            if(_selectedQuake != null) // first click ever
                                $(_selectedQuake).fadeTo('slow', _quakeFade);
                                
                            _selectedQuake = this;
                            showQuakeDetails(this, location, magnitude, globeSrc, bgColor);
                        }
                    }); // click a quake

                    sidebar.append(quake);
                } // if
                else { // we've reached the end of the page
                    return false;
                } // if

                quakeID++;
            });

            $('.quake').mouseover(mouseoverQuake);
            $('.quake').mouseout(mouseoutQuake);
            $('.quake').fadeTo('slow', _quakeFade);
            $('#quakeDetails').click(hideQuakeDetails);
            //$(document).scroll(hideQuakeDetails);
        }, // successful ajax
        error: function(request, status, error) {
            // alert('Error: ' + status);
        } // errrrror
    });
}

function mouseoverQuake() {
    $(this).fadeTo(0, _quakeFadeSelected);
}

function mouseoutQuake() {
    if (_selectedQuake == null || _selectedQuake != this)
        $(this).fadeTo('fast', _quakeFade);
}

function showQuakeDetails(clicked, location, magnitude, globeSrc, bgColor) {
    clicked = $(clicked);

    var quakeDetails = $('#quakeDetails');
    quakeDetails.css('height', _quakeDetailsHeight + 'px');
    quakeDetails.css('display', 'block');
    quakeDetails.css('left', clicked.css('width'));
    quakeDetails.css('top', clicked.position().top + 'px');
    quakeDetails.css('background-color', bgColor);
    quakeDetails.animate({
        width: _quakeDetailsWidth + 'px',
        opacity: _quakeFadeSelected
    }, 'fast');

    var globe = $(document.createElement('img'));
    globe.attr('src', globeSrc);
    globe.attr('alt', location);
    globe.attr('title', location);
    $('#quakeIcon').html('');
    $('#quakeIcon').append(globe);

    $('#quakeLocation').html(location);
    $('#quakeMagnitude').html(magnitude + '<small><small>M<sub>w</sub></small></small>');
}

function hideQuakeDetails() {
    _selectedQuake = null;
    
    $('.quake').fadeTo('slow', _quakeFade);
    $('#quakeDetails').animate({
        width: '10px',
        opacity: 0.0
    }, 'slow', function() {
        $('#quakeDetails').css('left', '-1000px');
    });
}

function findUnread(url) {
    $.get(url, function(data) {
        $remoteHtml = $(data);

        var links = $($('a', $remoteHtml), $remoteHtml);

        links.each(function() {
            var link = $(this, $remoteHtml).attr('href');
            $('#holder').append('<a href="' + link + '">' + link + '</a><br />');
            //alert($(this, $remoteHtml).attr('href'));
        }); // links

        var total = 0;
        var visited = 0;

        var unvisitedColor = $('#virgin').css('color');

        $('#holder a').each(function() {
            if ($(this).css('color') != unvisitedColor)
                visited++;
            total++;
        });

        alert("You've been to " + visited + " of " + total + " links on " + url);
    }, 'html');  // ajax.get
}