I built a simple QR code generator to use.  Simply enter a URL and my script would automatically generate a QR code for you:

Now I find that the Vimeo API, quite challenging to use and I figured that writing a wrapper class would make my life much easier. I found working directly with the Vimeo Moogaloop Flash player much easier to work with and directly called methods to the Moogaloop Flash Player.

You can download my class here. Vimeo Class. SWFobject is also required and can be downloaded here: http://code.google.com/p/swfobject/downloads/list

Implementing my Vimeo class is quite easy

<script type="text/javascript" src="swfobject.js">
<script type="text/javascript" src="Vimeo.js">
<div id="vimeoPlayer"></div>

<script type=’text/javascript’>
var vimeo;
vimeo = new Vimeo( “vimeoPlayer”, 480, 320, “vimeo” );
vimeo.loadVideo( ’24198254′ );
vimeo.addEventListener( vimeo.VIMEO_FINISH, videoFinished );

function videoFinished() {
//video finished playing
}
</script>

In order to start the Vimeo Class we need to setup the basics. We have to load in both the Vimeo class and swfobject. We also need a <div> tag to contain the Vimeo player.

Once we have that setup, we can call the Vimeo class and load in our video. In order to do so we have to initialize the Vimeo class and pass in the following parameters . Div container ID, video width dimensions, video height dimensions, variable name, show title of video, show by line of video, show user portrait, allow fullscreen, and video player colour.

Not all of these parameters are required. The only required parameters are: Div container ID, video width dimensions, video height dimensions, and variable name.

We can tell the class to load a specific video by calling loadVideo and pass in the video ID.

I bubbled all of the events the Moogaloop player dispatches out to the class for users. In my example, when the video has finished playing it calls our own function ‘videoFinished()’ and we can do whatever we want from there.

A finished example of this Vimeo class looks like this:

Below is a full documentation on my wrapper class methods:
- Constructor
- container – the html element that the vimeo player would be located in
- width – the vimeo player width
- height – the vimeo player height
- variableName – the variable name of the vimeo player
- showTitle (Boolean) – (optional) displays the title of the vimeo video. Default is true.
- showByline (Boolean) – (optional) displays the by line of the vimeo video. Default is true.
- showPortrait (Boolean) - (optional) displays the user portrait of the vimeo video. Default is true.
- fullScreen (Boolean) - (optional) allows users to watch Vimeo video in fullscreen. Default is true.
- playerColour (uint) – (optional) change the Vimeo video player colour. Default is the Vimeo blue (hex: #00adef)

- Event Types
- VIMEO_PLAYING – Fires when the vimeo player started to play.
- VIMEO_PAUSED – Fires when the vimeo player is paused.
- VIMEO_FINISH – Fires when the vimeo video is finished playing.
- VIMEO_PROGRESS – Fires as the vimeo video is playing and returns the position in seconds.
- VIMEO_LOAD_PROGRESS – Fires as the vimeo player is loading.
- VIMEO_LOAD_COMPLETE – Fires when the vimeo player has been loaded.
- VIMEO_SEEK – Fires when the user seeks through the video and returns the position in seconds.

- Public Functions
- addEventListener ( type, callback ) – A method that listens for events triggered by the Vimeo Player and calls the specific callback function as each event fires.
- type:String – The event that is being listened for
- callback:Function – The function that is called when the event is fired
- removeEventListener ( type, callback ) – A method that removes the callback function for a particular event type.
- type:String – The event that is being listened for
- callback:Function – The function that is called when the event is fired
- loadVideo ( vimeoID ) – Loads a specific video based on the Vimeo ID.
- vimeoID:String – The Vimeo video ID
- playVideo – Plays the loaded Vimeo video.
- pauseVideo – Pauses the loaded Vimeo video.
- seek( seekTime ) – Seeks the Vimeo video to the provided time.
- seekTime:String – The duration to seek the video to. This seekTime is based per second.
- volume( volumeLevel ) – Sets the volume level of the Vimeo player.
- volumeLevel:String – Sets the volume of the video. 0 is the lowest, 1 is the highest.
- changeVimeoColour( colour ) – Changes the Vimeo player colour.
- colour:String – This is a hexadecimal string that changes the colour of the Vimeo Video Player.
- unloadVideo – unloads the video.
- setVideoDimensions ( width, height ) – Sets the Vimeo video player’s width and height.
- width:Number – The width of the video player in pixels
- height:Number – The height of the video player in pixels

*second edit* I have the first iteration out for everyone to download: Whiteboard App. I am working on a fix for the save feature as part of my second update. Stay tuned.

Research in Motion is offering one free Playbook to developers who develop an application on their Blackberry Playbook platform. Link: http://us.blackberry.com/developers/tablet/playbook_offer.jsp I think it is a neat incentive to build interest in the Playbook.

I have recently developed an application and currently waiting its status by Blackberry’s admin. The application is a whiteboard note taking application where users can draw or write notes. It is ideal for the classroom where you can draw along aside your notes to illustrate and provide more of a full note taking experience. It is a pretty neat application for tablets. I will keep everyone posted on its status as the application progresses through the Blackberry approval.

The Playbook is quite interesting. Right off the bat, the major selling point for the Playbook are the applications already included with the tabet. It comes with a lot of neat applications, ranging from games to productivity to photo and web browsing. It is light weight, but powerful enough to play some graphic intensive games. My major gripe, as with many tablets is that the screen is a magnet for fingerprints. I plan and suggest investing in a cover or a screen for any type of tablet for the future.

Blackberry packed quite a lot of power. It is very responsive; I was able to play some graphic intensive games with Need for Speed and Tetris without noticing any lag. I find it great to use when watching TV; the Playbook is quick to turn on and allows me to check my emails and update blog posts quickly. The Playbook is quite bright and I was able to surf without having the need to turn on the light.

I like the size and the feel of the Playbook. The size is not large enough that it is a hassle to bring anywhere, but the screen resolution is comparable to market where you do not have to squint in order to read small text. The matte feel of the back feels comfortable to hold for quite a while. I was shocked at the weight when I initially picked up the Playbook, but after a while I have adjusted to its weight. As I type this blog post, it is noticeable that typing is quite hard, I have not found a good position to type. I have to put the tablet down on a table in order to type fast. However if I am sitting and relaxing, I am unable to type as fast as I hoped.

Overall the Playbook is quite a remarkable tablet. If you are looking for a tablet, I would suggest to look at the Blackberry Playbook.

This example would demonstrates the use of Geolocation with an open source map software to locate an approximate the user’s position.

We will be using both Google Maps and Bing Maps for this demonstration. The final result would look like this:
Google Maps
Bing Maps

Both Google and Bing require developers to import their library.

Google:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>


Bing:

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>


Note with Bing, the default map size is 600px by 400px and requires an extra two lines to adjust the width and height. More about this later.

Both maps require a container where the maps would be loaded into.

<div id="mapContainer"></div>


We now have an empty &ltdiv> container to load in our map. From here on end we will primarily focus on Javascript. We need to first determine if we can grab the user’s geolocation. We can do this by calling a property of the navigator object – more specifally the geolocation property. This is a boolean that would return if the user has provided access for the browser to collect the user’s geographical location or not. If the user grants the browser access, we can call the getCurrentPosition method to grab the latitude and longitude of the user.


<script type="text/javascript">
function success(position) {

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
</script>


The getCurrentPosition() method requires two functions – a success function and an error function. If the getCurrentPosition() method is able to provide the user’s latitude and longitude it would call the success function otherwise it would call the error function. Inside each function I am requesting an object being passed in. This object is important as it contains the information that we want – the latitude and longitude or an error message. If we write an alert( position.coords.latiude ) or alert( position.coords.longitude ) inside the success function we should get the latitude and longitude coordinates of where we are.

We want to pass this information along to our maps.

With Bing maps, we need to initialize their map. I normally stored this initalization inside a variable so I can call other methods down the road. As part of the initalization requirements, we need to provide Bing with the &ltdiv> container created earlier.


var myMap = null;
... more code ...

myMap = new VEMap( "mapContainer" );


Google Maps works a bit differently. We need to set the properties – such as latitude and longitude and any other map options, first before initializing Google Maps.

For both Bing and Google Maps, we need to pass in the latitude and longitude the browser was able to retreive in the success() function.

Google:

var mapContainer = document.getElementById('mapContainer');

mapContainer.style.width = '1024px';
mapContainer.style.height = '768px';
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( mapContainer, myOptions );


What this code does is set the mapContainer &ltdiv> to 1024px by 768px. We created a Latitude and Longitude object – in that order, and passed in the coordinates. I wanted to set the zoom to relatively close, used the small navigation control style used Google’s roadmap, and have google center to my location. The last part is optional, it is not necessary to use the options, but for this demonstration we are using it to show where we are. Finally we initialize Google Maps with the mapContainer &ltdiv> and the options that we want.

Bing:
Bing works a bit differently but has the same concept. We need to create a Latitude and Longitude object using the VELatLong() class with the proper altitude and pass that into the LoadMap() function to load the map onto the browser. As stated earlier, Bing maps loads 800px by 600px and if you want to change the dimensions we need to call the Resize() method. The Resize() method only tells Bing to load in more information to fill the size required. If the Resize() method is not called, Bing presumes that you are using the default 800px x 600px, which would not properly center your location and load in the incorrect data displaying some grey gaps on the map.


var mapContainer = document.getElementById('mapContainer');
var altitude = 1;
var latLongInfo = new VELatLong(position.coords.latitude, position.coords.longitude, altitude, VELatLong.RelativeToGround);
myMap.LoadMap(latLongInfo, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
myMap.Resize(1024, 768);
mapContainer.style.width = '1024px';
mapContainer.style.height = '768px';

var pinPoint = myMap.GetCenter();


For Bing we are using the same options as Google Maps – using road maps on a 2d surface and centering the map. Again this is optional and can be adjusted to fit your needs. The pinPoint object is the center of the map, which we will need to add the marker on the Bing map – see below.

Finally we can add a marker to indicate where we are.

Google:

var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"This is where you are"
});


Bing:

var pin = myMap.AddPushpin(pinPoint);
pin.SetTitle("You are located &ltspan style=color:red>Here");
pin.SetDescription("This is a demonstration of the HTML geolocation spec in use.");
pin.SetCustomIcon("<img src='logo.png' />");
pin.SetMoreInfoURL("http://www.josh-ho.com/blog/");


Google adds markers differently than Bing, but the concept is the same. We have to provide Google with the latitude and longitude – from the Latitude and Longitude object, the map and a description of what we want to say.

Bing maps require developers to call the AddPushpin() method and pass in the pinPoint object from before. The AddPushPin allows us to set the title, description, a custom icon and a URL for more information. I added some text to illustrate this, and this can be changed accordingly.

And there we have it, we now can show an accurate location of where the user is using the new W3C geolocation standard.

See the final result here:
Google Maps
Bing Maps

The end result should look like this:
Green Screen

We will need 4 canvases and load in 3 images. The first image would be the overlay image. This image would be the image that replaces the green portion of the image. The second image is the green screen image. Here we have an image with a green background and a scribble in front of it. The third image is the green screen colour. This is the colour that we will be using as the knockout colour.

The way we want to build out this script is to grab all of the canvas context image data. We would loop through the green screen image and replace each pixel of the knockout colour with the overlay image.


function greenScreen( gSContext, overlayContext, knockoutContext ) {
var greenScreenMergedArray = gSContext.getImageData( 0, 0, gSContext.canvas.width, gSContext.canvas.height );
var overlayScreenMergedArray = overlayContext.getImageData( 0, 0, overlayContext.canvas.width, overlayContext.canvas.height );
var knockoutScreenMergedArray = knockoutContext.getImageData( 0, 0, knockoutContext.canvas.width, knockoutContext.canvas.height );
var greenScreenMergedData = greenScreenMergedArray.data;
var overlayScreenMergedData = overlayScreenMergedArray.data;

return greenScreenMergedArray;
}


This code is intended to take the green screen image and replace the green with the background. Once all of the processing is completed, I am returning the newly merged green screen image for any additional image modifications or to place it back in the canvas. I have a static number of 170 as I find that it is the most accurate removing the green from gradients. I plan on including a threshold forumla to replace the static 170.

See this code in action:
Green Screen

At the end of this demonstration we should have a simple picture where we can adjust the contract, brightness and opacity values.

Link http://labs.josh-ho.com/getImageData/

We will first start off by loading in an image into our canvas. In order to use the getImageData() method we need to load the image into the canvas. In order to do so, we will use Javascript to create an image element, load in the image, then draw the image into the canvas.


<canvas id="imageCanvas">Your Browser cannot render the Canvas element</canvas>

</script>


Now if we upload the HTML we should see the image loaded onto the browser.

Lets add a slider to the HMTL code so we can adjust the Opacity levels of the image. Form sliders are new to HTML, and should suffice for our demonstration. To display a slider we need a form element and set the input type to ‘range’. I am setting the minimum and maximum value so that it would correspond to the alpha values of the image.


<form name="manipulationForm" id="manipulationForm">
<p>Opacity:</p>
<input type="range" id="opacitySliderObj" min="0" max="255" value="255" style="vertical-align:middle;"/> <p id="opacityValue" style="display:inline;">100%</p>
</form>


We are going to add some javascript functionality so that these sliders can function. I added a

tag so when we adjust the value of the slider we can see the percentage displayed. We will need to add an event listener to listen for when the user changes the slider value. When the slider has changed, we want to show the change in colour percentages so we will adjust the tag accordingly.


var opacityValue = document.getElementById( 'opacitySliderObj' ).value;

function formEventListener( evt ) {
opacityValue = evt.target.value;
document.getElementById( 'opacityValue' ).innerHTML = String(Math.floor((evt.target.value / evt.target.max) * 100)) + "%";
}


I added a new variable – opacityValue to the variable list so that we can store the value of the slider for the image manipulation process.

We will now need the image data information before we can start to manipulate the pixel information. To do so we will use the getImageData() method which can be accessed throught the canvas context object. I placed this line of code inside the image ‘load’ event listener so that it will grab the image data as soon as the image is loaded into the canvas.


var imageArray;
imageArray = canvasContext.getImageData( 0, 0, canvasContext.canvas.width, canvasContext.canvas.height );


You will need to define the x, y, width, and height of the data to collect. Now that we have the image data stored, we can write a function to loop through the data and adjust each pixel accordingly. Each pixel is broken up into 4 values – one for the red, green, blue and alpha values. In this demonstration we only want to adjust the alpha value of each pixel. We will adjust the alpha values based on the slider’s value (stored in the opacityValue variable) and return the image array back.


function adjustImage( iArray ){
var imageData = iArray.data;
var i;
for( i = 0; i < imageData.length; i+= 4 ) {
imageData[i+3] = opacityValue;
}

return iArray;
}


We need to update the context with the new pixel data. The w3C have defined another method called putImageData() which would take the image data and replace the canvas context with the new data. I placed this call inside the formEventListener() function so that you will see the changes at run time.


canvasContext.putImageData( adjustImage( imageArray ), 0, 0 );


And there you have it we have a basic opacity change using the new methods

Feel free to look at my demonstration here:
link http://labs.josh-ho.com/getImageData/

Please note not all browsers are HTML 5 capable. Based on my research Safari 5 (on the mac), Chrome 6 and Firefox 3.6+ have the right methods and are HTML 5 capable of the Drag and Drop Upload

For this to work, I plan on using the <canvas> tag – I have a previous post explaining the canvas tag here (http://www.josh-ho.com/blog/?p=314).

<canvas id="myCanvas">Your browser does not support the canvas tag


According to the W3C, I can apply a dragenter, dragleave, dragover and a drop event on objects with Javascript. In that case I applied an event listener to my canvas for those events.

var canvas = document.getElementById("myCanvas");
canvas.addEventListener("drop", drop, false );
canvas.addEventListener("dragenter", dragEnter, false);
canvas.addEventListener("dragleave", dragExit, false);
canvas.addEventListener("dragover", dragOver, false);

function drop(evt) {
evt.stopPropagation();
evt.preventDefault()
}


There are 4 event listener functions that I created for each of the Event Listeners. When I drag anything I want to make sure that no other events are being fired so I have to call evt.stopPropagation and evt.preventDefault. What these two event methods do is stop other events from bubbling to the top and causing a misfired or unintended fire event. I also wanted to make my <canvas> element to replicate a similar functionality where the canvas opacity / alpha dims down to 50% when you drag your file over, and return back to normal when your mouse leaves the canvas.

The browser knows if you are dragging an object inside of the browser and if you are dragging a File into the browser. Which is what we want to do. To grab the file we can use the dataTransfer Interface to return the object to us. In our case it would return the file that we dragged into the browser.

var file = evt.dataTransfer.files[0];

(The code above only gets the first file the user dragged. If the user is dragging multiple files, you can run a loop to loop through the file index).

We now have to turn our attention to the drop function. Here is where we are using the new methods outlined by the W3C to upload a file. I have found that Firefox handles file uploading differently than Chrome and Safari. In order for this to work on the different browsers, I ended up writing to different versions of the File Upload in javascript and used a browser detect to determine which code to use. However as more and more browsers become HTML 5 ready, and browers start to implement the W3C standards, this may end up being unnecessary and one way to write the code would suffice.

Each of the browsers needed to call an XMLHTTPRequest and provide a URL to the request to submit the data to. This is no different than calling the <form> object and passing in the URL for the action property. I created a variable called file which would contain the first file that you dropped on my canvas.

var url = "upload.php";
var request = new XMLHttpRequest();
var file = evt.dataTransfer.files[0];
request.open( "POST", url, true ); // open asynchronous post request

function playlist(location, name) {
var newobj = document.createElement('p');
newobj.innerHTML = '<a href="' + location + '">' + name + "</a>";
playListElement.appendChild(newobj);
}

When the XMLHTTPRequest is complete, I intend on allowing the user to click on a link so that they could download the file that they have uploaded.

Now earlier I stated that Firefox is different than Chrome and Safari in terms of uploading files.

For Firefox I had to create the multiformboundary, which is the information the <form> uses when it passes data through the POST or GET method. In the multiformboundary I attached the file and the file name so in the backend, I can grab the file. Once I created the file I can call the sendAsBinary method, pass in my newly created multiformboundary and send away. This method is only limited to Firefox and cannot be used by other browsers.

var boundary = '------multipartformboundary' + (new Date).getTime();
var dashdash = '--';
var crlf = '\r\n';
var builder = '';

/* FOR FIREFOX 3.6 ONLY */
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); // make sure to set a boundary
request.setRequestHeader("Connection", "close");
request.sendAsBinary(builder);


For both Chrome and Safari I was able to use a new method called FormData. What FormData does is that it handles all of the multiformboundary and all I need to do is attach my variable name and my object. Now there is a big difference in what the new XMLHTTPRequest and the old XMLHTTPRequest can do. Prior to the W3C standards update, the XMLHTTPRequest could only take in strings. Now after the standards update, the XMLHTTPRequest can accept blob = binary large object. As a result we are now able to pass in our FormData through the XMLHttpRequest.

var formData = new FormData();
formData.append("user_file", file);
request.send(formData);


Now we are pretty much done. All of the javascript and HTML code has been written out. All we need to do is write a PHP file upload script that would take the file we sent it and actually upload the file. This would be our “upload.php” as defined in our variable ‘url’. What this code will do is print out the path of where the file is so when the XMLHTTPRequest is completed I can use the path of the file as a way to link the user to download their file that they have just uploaded.

$target_path = "upload/".$_FILES['user_file']['name'];
if(move_uploaded_file($_FILES['user_file']['tmp_name'], $target_path)) {
echo $target_path;
}
?>


And there we have it. An HTML 5 Drag and Drop Upload that works.
I have attached my own file that you can download if you want – Drag and Drop Upload

We can start of an HTML 5 document as follows:

<!DOCTYPE HTML>
<html>
<head>
<title>HTML 5 Canvas Tag Test</title>
</head>
<body>
... code goes in here
</body>
</html>


To create the canvas tag we just call <canvas>. There are 3 important parameters that we can apply to the <canvas> tag

With that in mind we apply those properties on our tag as follows. In this example we are going to designate the canvas as a 400×400 pixel canvas.

<canvas id="myCanvas" width="400" height="400"></canvas>


If we save everything and upload the file now, we would not see anything from our <canvas> tag. The only problem is, we did not assign anything to be rendered inside that canvas object and thus nothing is displayed.

In order to draw an object we can use javascript to draw a box inside of our object. In our case we want to draw a 200×200 pixel red box inside our canvas object.

<script>
var canvas = document.getElementById('myCanvas');
var canvasContext = canvas.getContext("2d");
canvasContext.fillStyle="#FF0000";
canvasContext.fillRect(0,0,200,200);
</script>


What we have done is accessed the canvas tag and applied the getContext object on the canvas. getContext() is a built in HTML 5 object that can create objects inside the canvas. We apply the getContext() in our canvasContext variable and with that we can assign the colour – fillStyle; red (#FF0000), and what object to draw – fillRect; (x, y, width, height – 0, 0, 200, 200). If we want to move the rectangle we can adjust the x and y values in the fillRect, which would change the x and y location of the red box we have just created.

That is it, we now can draw on our canvas using HTML 5 and Javascript.

In this example we will take a look at one of the new tags – video. And use the new API’s defined in HTML 5 to play / pause the video.

Creating an HTML 5 document is not hard. It is the same as creating the HTML 4 standard.

<!DOCTYPE HTML>
<html>
<head>
<title>HTML 5 Video Tag Test</title>
</head>
<body>
... code goes in here
</body>
</html>


Now we want to add the video tag. According to the W3C – http://dev.w3.org/html5/spec/Overview.html#video we can define a video tag by using <video>. There are some attributes that we can use to define the video tag:

In our example we want to use the src and the controls so we can start and stop playing. To do so we have to include the video tag in our code. We must define controls as “controls” so that the browser would display the basic, play / pause buttons.

<video controls="controls" src="myvideo.ogg">
your browser does not support the video tag
</video>


As you can see I have a simple copy inside the video tag that claims that the user’s browser does not support the video tag. With HTML 5 still being worked on, not all browsers can view the HTML 5 standard. As a result, those browsers would not be able to render the video tag. Instead they would see the copy “your browser does not support the video tag”.

Also note, because HTML 5 has not been fully standardized yet, the video tag is still up in the air. Different browsers can only play different video types. Firefox and Opera browsers can play .ogg files – more commonly known as Ogg Vorbis, while Safari can play H264 videos. Chrome can play both ogg and H264 files. The debate on which video files to play is still underway. Ogg Vorbis is open source while H264 is not. However since the video tag has not been fully standardized yet, this debate still continues.

In our case we are going with the .ogg format. Now if you are on a Safari browser, you can change the src to a .mp4 file format, which uses the H264 video.

Now we do not need to use the browser’s controls to play / pause the video. We can use the HTML 5 Video API for that.

We can add a couple of anchor tags to our code so we can play or pause the video.


<a href="#" onClick="myControlFunction('play');">Play</a>
<a href="#" onClick="myControlFunction('pause');">Pause</a>


We can use javascript to control the video tag and use the HTML 5 Video API. According to the W3C we can tell the video object to play and pause by using the play() and pause() methods.


<script>
function myControlFunction(videoSelect){
  var video = document.querySelector('video');
  if( videoSelect == "play" ) {
    video.play();
  } else if( videoSelect == "pause" ){
    video.pause();
  }
}
</script>


What this code does is that it searches for the video tag and sets it in the variable I designated called “video”. With the object in my “video” variable, I can use the Video API methods of play() and pause(), to play or pause the video. I passed in a small variable into my function which would tell me which button was pressed. If the play button was pressed, I want the video to play and vice versa.

And there we have it, a simple play pause video demo using HTML 5 and the Video HTML 5 API.

The summer is here and we have lunched a new Facebook application with Molson Canadian. It is a pretty neat application where people can earn badges for doing things the love and eventually win prizes for doing those things. I am pretty excited for this application, it is a very fun application. We utilized the Facebook API fully and integrated with our own customized API to produce a Facebook application we are happy to showcase.

Check it out

Molson Canadian Seize The Summer