bigdog.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript">
/*jslint browser: true, sloppy: true */
/*global $, console*/

/* Todo
 * getEventDetails getting called twice - first time with no slug
 * if $.getJSON calls fail...
*/
var all_events;


function emptyAndScroll() {
    $('#event_container').empty();
    window.scrollTo(0, $('#event_container').offset().top); // scroll to top of events container
    //window.scrollTo(0, 0); // scroll to top
    return true;
}

function getEventSlug() {
    // use the url or hash to figrure out what event we're on
    // not sure how to use urls, try hash first
    var eventSlug = window.location.hash.replace('#', ''); // this could be blank.. do we care?

    return eventSlug;
}

function slugToID(slug) {
    var i;
    for (i = 0; i < all_events.length; i++) {
        if (slug === all_events[i].subdomain) {
            return all_events[i].id;
        }
    }
    return false;
}

function getEventDetails(slug, callback) {
    // look at overall event data, get event id via slug
    var event_id = slugToID(slug),
        api_url = 'https://nightout.com/api/events/' + event_id + '?oauth_token=3d4zpwlv3g3wmt30x7rqvcosyl57btu&callback=?';


    // take the slug and send it off to NightOut.
    console.log('before getEventDetails api call');
    $.getJSON(api_url, function(data) {
        console.log('success, data returned:');
        console.log(data);
        if (typeof callback === "function") {
            callback(data, slug);
        } else {
            return data;
        }
    });
}

function disperseDetails(details, slug) {
    var event_container = $('#event_container');
    emptyAndScroll();
    var $this_event = $("<div class='event-detail'></div>");
    $this_event.append('<div id="eventTitle">' + details.title + '</div>');
    $this_event.append('<div id="eventPoster"><img src="' + details.poster_url + '" /></div>');
    $this_event.append('<div id="eventStart">' + details.start_time + '</div>');
    $this_event.append('<div id="eventEnd">' + details.end_time + '</div>');
    $this_event.append('<div id="eventDescription">' + details.description + '</div>');
    $this_event.append('<iframe id="ticketingEmbed" src="https://embed.nightout.com/events/' + slug + '" width="100%" height="600px"></iframe>');

    event_container.append($this_event);
}

function loadEvent(slug) {
    // 1. get the event slug via getEventSlug();
    // 2. use event slug to access NightOut API and retrieve all the details via getEventDetails(slug);
    // 3. Once that's done loading via ajax, callback to disperse those details to appropriate elements via disperseDetails(details);

    if (slug === undefined) {
        slug = getEventSlug();
    }

    if (slug === "") {
        loadEvents(true);
    }

    getEventDetails(slug, disperseDetails);

}

function getAllEvents(callback, force) {
    if (force === true || all_events === undefined) {
        var api_url = "https://nightout.com/api/events?oauth_token=3d4zpwlv3g3wmt30x7rqvcosyl57btu&organization_ids=357,358,576,617,625,592,246,639&callback=?";
        $.getJSON(api_url, function(data) {
            all_events = data;
            if (typeof callback === "function") {
                callback(all_events);
            } else {
                return all_events;
            }
        });
    } else {
        if (typeof callback === "function") {
            callback(all_events);
        } else {
            return all_events;
        }
    }
}

function loadEvents(force) {
    /*
    Todo:
        Think about sorting events
    */
    var event_container = $('#event_container');
    if (force === true || getEventSlug() === "") {
        emptyAndScroll();
        var i, template, this_event;

        for (i = 0; i < all_events.length; i++) {
            this_event = all_events[i];
            template = $('<div class="event" data-event-id="' + this_event.id + '" data-slug="' + this_event.subdomain + '"></div>');
            template.append('<span class="event_title">' + this_event.title + '</span>');
            template.css('background', 'transparent url(' + this_event.poster_url + ') center center no-repeat');
            event_container.append(template);
        }
        $('.event').bind('click', function() {
            window.location.hash = $(this).attr('data-slug');
            loadEvent();
        });
    } else {
        loadEvent(getEventSlug());
    }
}



$(function() {
    // only do this if we're on the events page
    if (window.location.href.search('events') > -1) {
        getAllEvents(loadEvents);
        // check if user changed hash
        var hash_cache = window.location.hash,
            hash_check = setInterval(function() {
                if (hash_cache !== window.location.hash) {
                    hash_cache = window.location.hash;
                    getAllEvents(loadEvents);
                }
            }, 100);
    }


});

</script>

<style type="text/css">
  .event {
    width: 200px;
    height: 200px;
    float: left;
    margin: 10px;
    cursor: pointer;
    }
</style>

events.html

<a href="#">See all events</a>
<div id="event_container"></div>
<!--
<div id="eventTitle"></div>
<div id="eventStart"></div>
<div id="eventEnd"></div>
<div id="eventDescription"></div>
<div id="eventPoster"></div>
<iframe id="ticketingEmbed"></div>
-->