Brightcove App Cloud app js

app.js

var app = {};

// The Brightcove API provides an "init" event in addition to the normal jQuery load event
$(bc).bind("init", function () {
    var wrappedFetch = bc.device.fetchContentsOfURL;

    // We can detect if we are on-device or in-browser to make life easier for ourselves
    if (!bc.device.isNative()) {
        bc.device.fetchContentsOfURL = function(url, success, error) {
            // note: start chrome with --disable-web-security to disable cross-domain protection
            $.get(url, function(json) {
                // for compatibility with the api we'll convert to a string
                success(JSON.stringify(json));
            }).error(function() { error(); });
        };

        // we hard-coded the location for testing purposes        
        bc.device.getLocation = function(success, error) {
            success({"latitude":'42.330454', "longitude":'-71.193073'});
        };

        bc.device.alert = function(message, success, error) { alert(message); };

        bc.device.setAutoRotateDirections = function( directions, successCallback, errorCallback ) {};
    }
});

// Displays a spinner/progress indicator with a message
// The base application template does provide a spinner but we wanted something custom
app.showProgress = function(status) {
    var status = status || '';
  
    $('#status').html(status);
    app.spinner.show();
}

app.hideProgress = function() {
    app.spinner.hide();
}

/** Loads photos and calls the given callback with the json data. */
app.getPhotos = function(callback) {
    var fetchPhotos = function(location) {
        // location can be empty 
        if (!bc.device.isNative() && location == '') location = '11 Cypress St Newton, MA';

        var url = 'http://picasaweb.google.com/data/feed/api/all?max-results=100&alt=json&l=' + escape(location);
        
        app.showProgress('Finding images near you...');
        bc.device.fetchContentsOfURL(url, 
              function(data) {
                app.hideProgress();
                  callback(data);
              },
              function(data) { bc.utils.warn( data.errorCode ); }
          );
    };
    
    // get the location only if it's not already cached
    // API provides on-device caching (limited to 5MB currently)
    var location = bc.core.cache('location');
    if (location) {
        fetchPhotos(location);
    } else {
        app.showProgress('Finding your location...');
        
        var url,
          client = new simplegeo.ContextClient('CLIENTKEY');

        bc.device.getLocation(function (data) {
          var lat = data.latitude,
              lon = data.longitude,
              location = '',
              address, city, state;

            // Load geo data
            client.getContext(lat, lon, function(err, geo_data) {
              if (err) {
                bc.device.alert("Oops! " + err);
              } else {
                if (geo_data.address) {
                    address = geo_data.address.properties.address;
                    city = geo_data.address.properties.city;
                    state = geo_data.address.properties.province;
                    location = (address ? address + ' ' : ' ') + 
                        (city ? city : '') +
                        (state ? ', ' + state : '');
                }

                bc.core.cache('location', location);
                fetchPhotos(location);
              }
            });
        }, 
        function( data ) { bc.utils.warn( data.errorCode ); });
    }
}

/** Recenters the detail image. */
app.recenterImage = function() {
    var w = bc.ui.width(), h = bc.ui.height();
    // ... calculate the new size and update the image ...
};

app.recenterGallery = function() {
    // ...
};

/** Handles when an image is tapped to display the details. */
app.displayDetail = function(image) {
    var title, subTitle, thirdTitle, thumbnail, date, preload;

    image = $(image);
    app.current = parseInt(image.attr('data-index'));

    app.showProgress();
    $('#largeImage').hide().attr('src', image.attr('data-full'));

    app.recenterImage();

    // ... update the image overlay with metadata ...

    // display our mini-map
    $('#imageInfo .minimap').html('');
    if (image.data('location')) {
        $('#imageInfo .minimap').html(app.markup(
            '<img src="http://maps.google.com/maps/api/staticmap?size=100x100&center={{0}}&maptype=roadmap&sensor=true&markers={{1}}" />', [
                escape(bc.core.cache('location')),
                escape('size:small|label:A|' + image.data('location').replace(' ', ','))
            ]));
    }

    // API provides a stack of view history and ability to navigate between views
    if (bc.ui.currentPage[0].id != 'detail')
        bc.ui.forwardPage('#detail');

    // ... preload the 2 neighboring images ...
}

app.getThumb = function(i) {
    // ...
};

app.getCurrentThumb = function() {
    // ...
};

app.displayImage = function(delta, direction) {
    // ... display the image ...

    // slide the other one out if there is one
    if (copy) {
        // left = $('#largeImageWrapperClone').css('width') * -1;
        left = bc.ui.width() * 1.5 * delta;
        // alert($('#largeImageWrapperClone').css('width'));
        copy.animate(
            {'left':left}, 
            800, 
            'swing',
            function() { copy.remove(); }
        );
    }
}
 
app.nextImage = function() { app.displayImage(1); }

app.prevImage = function() { app.displayImage(-1); }

$(bc).bind("init", function () {
    // Allow auto-rotation of this page
    bc.device.setAutoRotateDirections(["all"]);

    // Our custom spinner element
    app.spinner = $('<div id="spinnerContainer"><span class="flower" /></div>').hide().appendTo($("body"));
    app.spinner.append('<span id="status"></span>');

    var template = '<div class="thumb" data-large="{{3}}" data-full="{{4}}" data-index="{{5}}" style="height:{{0}}px; width:{{1}}px; background-image: url(\'{{2}}\')"></div>';
    
    app.getPhotos(function(data) {
        var json = JSON.parse(data);

        // ... calculate gallery image dimensions ...

        d = Math.min(minWidth, minHeight);
        app.thumbSize = d;
        app.imageCount = entries.length;

        app.recenterGallery();

        // ... parse the feed and set up the images and metadata ...

        // API provides a tap event that is emulated with 'click' in the browser
        $('#photos .thumb').bind('tap', function(evt) {
            app.displayDetail(evt.target);
        });
    });

    // show the loading dialog when we are loading images
    $('#largeImage').load(function(evt) {
        app.hideProgress();
        $('#largeImage').show();
    });

    $('#largeImage').bind('tap', function(evt) {
        $('#imageInfo').slideToggle();
    });

    // API provides events for handling touch interaction    
    $('#detail').bind('swipe', function(evt, direction) {
        if (direction == 'swipeRight')
            app.nextImage();
        else if (direction == 'swipeLeft')
            app.prevImage();
    });

    // We need to reset some of the positioning / sizes based on orientation
    $(bc).bind("vieworientationchange", function (evt, data) {
        app.recenterImage();
        app.recenterGallery();
    });
});