Tågtider JavaScript Widget

widget.js

// See http://alexmarandon.com/articles/web_widget_jquery/

(function() {

    // Localize jQuery variable
    var jQuery;
    var remoteJquery = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js';
    var localJquery = 'static/js/jquery-1.6.4.min.js';

    /**
     * Load jQuery if not present
     *
     */
    if (window.jQuery === undefined || window.jQuery.fn.jquery >= '1.6.4') {
        appendJqueryScriptTag(remoteJquery, localJquery);
    }
    else {
        // The jQuery version on the window is the one we want to use
        jQuery = window.jQuery;
        init();
    }

    /**
     * Append jQuery script tag
     *
     * @param string url
     * @param string fallbackUrl
     *
     */
    function appendJqueryScriptTag(url, fallbackUrl)
    {
        var scriptTag = document.createElement('script');
        scriptTag.setAttribute('type', 'text/javascript');
        scriptTag.setAttribute('src', url);
        scriptTag.onload = scriptLoadHandler;
        scriptTag.onreadystatechange = scriptReadyStateChangeHandler;

        if(fallbackUrl) {
            scriptTag.onerror = function()
            {
                appendJqueryScriptTag(fallbackUrl);
            };
        }

        (document.getElementsByTagName('head')[0] || document.documentElement).appendChild(scriptTag);
    }

    /**
     * Script ready state change handler
     *
     * Same thing but for IE
     *
     */
    function scriptReadyStateChangeHandler()
    {
        if(this.readyState == 'complete' || this.readyState == 'loaded') {
            scriptLoadHandler();
        }
    }

    /**
     * Script load handler
     *
     * Called once jQuery has loaded
     *
     */
    function scriptLoadHandler()
    {
        // Restore $ and window.jQuery to their previous values and store the
        // new jQuery in our local jQuery variable
        jQuery = window.jQuery.noConflict(true);

        // Call widgets init function
        init(); 
    }

    /**
     * Init widgets
     *
     */
    function init()
    {
        jQuery(document).ready(function($) {
            var selector = '.tagtider-widget';
            var endpoint = 'http://api.tagtider.dev/';

            /**
             * Style
             *
             */
            var cssLink = $('<link>', {
                rel: 'stylesheet',
                type: 'text/css',
                href: 'static/css/widget.css'
            });
            cssLink.appendTo('head');

            /**
             * Controller
             *
             */
            $.each($(selector), function(i, e) {
                var element = $(this).append('<span>…</span>');
                var referance = element.attr('href');
                var relation = element.attr('rel');
                var match;

                if(relation && relation.toLowerCase().indexOf('nofollow') >= 0) {
                    return true;
                }

                // Route
                if(referance == 'http://tagtider.net/') {
                    stationsWidget(element);
                }
                else {
                    if(match = referance.match(/^http:\/\/tagtider.net\/([\w-]+)\/(?:(avgangar|ankomster)\/)?$/)) {
                        if(match[2]) {
                            transitsWidget(element, match);
                        }
                        else {
                            stationWidget(element, match);
                        }
                    }
                }
            });

            /**
             * Render widget
             *
             * @param object element ?
             * @param string name
             * @param string content
             *
             * @return string html
             */
            function renderWidget(element, name, content)
            {
                element.children('span').remove();

                var html = '<div class="'+name+'">';
                html += '<h3>'+element.html()+'</h3>';
                html += content;
                html += '</div>';

                // Hide referance element
                element.hide();

                return html;
            }

            /**
             * Render timetable
             *
             * @param array match
             * @param string transits 'arrivals'|'departures'|'transits'
             *
             * @return string content
             */
            function renderTimetable(match, transits)
            {
                var station = match[1];
                var transits = match[2] == 'avgangar' || transits == 'arrivals' ? 'arrivals' : 'departures';
                var path = endpoint+'stations/'+station+'/'+transits;
                //console.log(path);

                var content = '<table>';
                content += '<caption>'+(transits == 'arrivals' ? 'Ankommande' : 'Avgående')+' tåg</caption>';
                content += '<thead><tr>';
                content += '<th>Tid</th>';
                content += '<th>'+(transits == 'arrivals' ? 'Till' : 'Från')+'</th>';
                content += '<th>Ny tid</th>';
                content += '<th>Spår</th>';
                content += '</tr></thead>';
                content += '<tfoot><tr><td colspan="4">'+path+'</td></tr></tfoot>';
                content += '</table>';
                // TODO: Loop out TR's with data

                return content;
            }

            /**
             * Stations widget
             *
             * @return void
             */
            function stationsWidget(element)
            {
                // TODO: Ask for geolocation and view closest station
                var path = endpoint+'stations/';
                var content;

                $.getJSON(path+'?callback=?', function(data) {
                    content = '<select onchange="document.location.href=this.options[this.selectedIndex].value;">';
                    $.each(data, function(i, e) {
                        content += '<option value="#'+e.slug+'">'+e.name+'</option>';
                    });
                    content += '</select>';
                    // TODO: Handle delayed output via timeout 7s

                    element.after(renderWidget(element, 'tagtider-stations-widget', content));
                });
            }

            /**
             * Station widget
             *
             * @param array match
             *
             * @return void
             */
            function stationWidget(element, match)
            {
                var content = renderTimetable(match, 'departures');
                content += renderTimetable(match, 'arrivals');

                element.after(renderWidget(element, 'tagtider-station-widget', content));
            }

            /**
             * Transits widget
             *
             * @param array match
             * @param string transits
             *
             * @return void
             */
            function transitsWidget(element, match, transits)
            {
                var content = renderTimetable(match);

                element.after(renderWidget(element, 'tagtider-transits-widget', content));
            }

        });
    }

})(); // We call our anonymous function immediately