//alert('Remove this line before using in production!');

// Init style shamelessly stolen from jQuery http://jquery.com
var Froogaloop = (function(){
    // Define a local copy of Froogaloop
    function Froogaloop(iframe) {
        // The Froogaloop object is actually just the init constructor
        return new Froogaloop.fn.init(iframe);
    }

    var eventCallbacks = {},
        hasWindowEvent = false,
        isReady = false,
        slice = Array.prototype.slice,
        playerDomain = '';

    Froogaloop.fn = Froogaloop.prototype = {
        element: null,

        init: function(iframe) {
            if (typeof iframe === "string") {
                iframe = document.getElementById(iframe);
            }

            this.element = iframe;

            // Register message event listeners
            playerDomain = getDomainFromUrl(this.element.getAttribute('src'));

            return this;
        },

        /*
         * Calls a function to act upon the player.
         *
         * @param {string} method The name of the Javascript API method to call. Eg: 'play'.
         * @param {Array|Function} valueOrCallback params Array of parameters to pass when calling an API method
         *                                or callback function when the method returns a value.
         */
        api: function(method, valueOrCallback) {
            if (!this.element || !method) {
                return false;
            }

            var self = this,
                element = self.element,
                target_id = element.id !== '' ? element.id : null,
                params = !isFunction(valueOrCallback) ? valueOrCallback : null,
                callback = isFunction(valueOrCallback) ? valueOrCallback : null;

            // Store the callback for get functions
            if (callback) {
                storeCallback(method, callback, target_id);
            }

            postMessage(method, params, element);
            return self;
        },

        /*
         * Registers an event listener and a callback function that gets called when the event fires.
         *
         * @param eventName (String): Name of the event to listen for.
         * @param callback (Function): Function that should be called when the event fires.
         */
        addEvent: function(eventName, callback) {
            if (!this.element) {
                return false;
            }

            var self = this,
                element = self.element,
                target_id = element.id !== '' ? element.id : null;


            storeCallback(eventName, callback, target_id);

            // The ready event is not registered via postMessage. It fires regardless.
            if (eventName != 'ready') {
                postMessage('addEventListener', eventName, element);
            }
            else if (eventName == 'ready' && isReady) {
                callback.call(null, target_id);
            }

            return self;
        },

        /*
         * Unregisters an event listener that gets called when the event fires.
         *
         * @param eventName (String): Name of the event to stop listening for.
         */
        removeEvent: function(eventName) {
            if (!this.element) {
                return false;
            }

            var self = this,
                element = self.element,
                target_id = element.id !== '' ? element.id : null,
                removed = removeCallback(eventName, target_id);

            // The ready event is not registered
            if (eventName != 'ready' && removed) {
                postMessage('removeEventListener', eventName, element);
            }
        }
    };

    /**
     * Handles posting a message to the parent window.
     *
     * @param method (String): name of the method to call inside the player. For api calls
     * this is the name of the api method (api_play or api_pause) while for events this method
     * is api_addEventListener.
     * @param params (Object or Array): List of parameters to submit to the method. Can be either
     * a single param or an array list of parameters.
     * @param target (HTMLElement): Target iframe to post the message to.
     */
    function postMessage(method, params, target) {
        if (!target.contentWindow.postMessage) {
            return false;
        }

        var url = target.getAttribute('src').split('?')[0],
            data = JSON.stringify({
                method: method,
                value: params
            });

        target.contentWindow.postMessage(data, url);
    }

    /**
     * Event that fires whenever the window receives a message from its parent
     * via window.postMessage.
     */
    function onMessageReceived(event) {
        var data, method;

        try {
            data = JSON.parse(event.data);
            method = data.event || data.method;
        }
        catch(e)  {
            //fail silently... like a ninja!
        }

        if (method == 'ready' && !isReady) {
            isReady = true;
        }

        // Handles messages from moogaloop only
        if (event.origin != playerDomain) {
            return false;
        }

        var value = data.value,
            eventData = data.data,
            target_id = target_id === '' ? null : data.player_id,

            callback = getCallback(method, target_id),
            params = [];

        if (!callback) {
            return false;
        }

        if (value !== undefined) {
            params.push(value);
        }

        if (eventData) {
            params.push(eventData);
        }

        if (target_id) {
            params.push(target_id);
        }

        return params.length > 0 ? callback.apply(null, params) : callback.call();
    }


    /**
     * Stores submitted callbacks for each iframe being tracked and each
     * event for that iframe.
     *
     * @param eventName (String): Name of the event. Eg. api_onPlay
     * @param callback (Function): Function that should get executed when the
     * event is fired.
     * @param target_id (String) [Optional]: If handling more than one iframe then
     * it stores the different callbacks for different iframes based on the iframe's
     * id.
     */
    function storeCallback(eventName, callback, target_id) {
        if (target_id) {
            if (!eventCallbacks[target_id]) {
                eventCallbacks[target_id] = {};
            }
            eventCallbacks[target_id][eventName] = callback;
        }
        else {
            eventCallbacks[eventName] = callback;
        }
    }

    /**
     * Retrieves stored callbacks.
     */
    function getCallback(eventName, target_id) {
        if (target_id) {
            return eventCallbacks[target_id][eventName];
        }
        else {
            return eventCallbacks[eventName];
        }
    }

    function removeCallback(eventName, target_id) {
        if (target_id && eventCallbacks[target_id]) {
            if (!eventCallbacks[target_id][eventName]) {
                return false;
            }
            eventCallbacks[target_id][eventName] = null;
        }
        else {
            if (!eventCallbacks[eventName]) {
                return false;
            }
            eventCallbacks[eventName] = null;
        }

        return true;
    }

    /**
     * Returns a domain's root domain.
     * Eg. returns http://vimeo.com when http://vimeo.com/channels is sbumitted
     *
     * @param url (String): Url to test against.
     * @return url (String): Root domain of submitted url
     */
    function getDomainFromUrl(url) {
        var url_pieces = url.split('/'),
            domain_str = '';

        for(var i = 0, length = url_pieces.length; i < length; i++) {
            if(i<3) {domain_str += url_pieces[i];}
            else {break;}
            if(i<2) {domain_str += '/';}
        }

        return domain_str;
    }

    function isFunction(obj) {
        return !!(obj && obj.constructor && obj.call && obj.apply);
    }

    function isArray(obj) {
        return toString.call(obj) === '[object Array]';
    }

    // Give the init function the Froogaloop prototype for later instantiation
    Froogaloop.fn.init.prototype = Froogaloop.fn;

    // Listens for the message event.
    // W3C
    if (window.addEventListener) {
        window.addEventListener('message', onMessageReceived, false);
    }
    // IE
    else {
        window.attachEvent('onmessage', onMessageReceived, false);
    }

    // Expose froogaloop to the global object
    return (window.Froogaloop = window.$f = Froogaloop);

})();



$(document).ready(function () {
	console.log($('iframe').size());
	$('.btn a').click(function () {
		return false;  
	});
	
	                // Listen for the ready event for any vimeo video players on the page
	                var vimeoPlayers = document.querySelectorAll('iframe'),
	                    player;

	                for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
	                    player = vimeoPlayers[i];
	                    $(player).addEvent('ready', ready);
	                }

	                /**
	* Utility function for adding an event. Handles the inconsistencies
	* between the W3C method for adding events (addEventListener) and
	* IE's (attachEvent).
	*/
	                function addEvent(element, eventName, callback) {
	                    if (element.addEventListener) {
	                        element.addEventListener(eventName, callback, false);
	                    }
	                    else {
	                        element.attachEvent(eventName, callback, false);
	                    }
	                }

	                /**
	* Called once a vimeo player is loaded and ready to receive
	* commands. You can add events and make api calls only after this
	* function has been called.
	*/
	                function ready(player_id) {
	                    // Keep a reference to Froogaloop for this player
	                    var container = document.getElementById(player_id).parentNode.parentNode,
	                        froogaloop = $f(player_id),
	                        apiConsole = container.querySelector('.console .output');

	                    /**
	* Prepends log messages to the example console for you to see.
	*/
	                    function apiLog(message) {
	                        apiConsole.innerHTML = message + '\n' + apiConsole.innerHTML;
	                    }

	                    /**
	* Sets up the actions for the buttons that will perform simple
	* api calls to Froogaloop (play, pause, etc.). These api methods
	* are actions performed on the player that take no parameters and
	* return no values.
	*/
	                    function setupSimpleButtons() {
	                        var buttons = container.querySelector('.btn'),
	                            playBtn = buttons.querySelector('.play'),
	                            pauseBtn = buttons.querySelector('.pause'),
	                            unloadBtn = buttons.querySelector('.unload');

	                        // Call play when play button clicked
	                        addEvent(playBtn, 'click', function() {
	                            froogaloop.api('play');
	                        }, false);

	                        // Call pause when pause button clicked
	                        addEvent(pauseBtn, 'click', function() {
	                            froogaloop.api('pause');
	                        }, false);

	                        // Call unload when unload button clicked
	                        addEvent(unloadBtn, 'click', function() {
	                            froogaloop.api('unload');
	                        }, false);
	                    }

	                    /**
	* Sets up the actions for the buttons that will modify certain
	* things about the player and the video in it. These methods
	* take a parameter, such as a color value when setting a color.
	*/
	                    function setupModifierButtons() {
	                        var buttons = container.querySelector('div dl.modifiers'),
	                            seekBtn = buttons.querySelector('.seek'),
	                            volumeBtn = buttons.querySelector('.volume'),
	                            loopBtn = buttons.querySelector('.loop'),
	                            colorBtn = buttons.querySelector('.color'),
	                            randomColorBtn = buttons.querySelector('.randomColor');

	                        // Call seekTo when seek button clicked
	                        addEvent(seekBtn, 'click', function(e) {
	                            // Don't do anything if clicking on anything but the button (such as the input field)
	                            if (e.target != this) {
	                                return false;
	                            }

	                            // Grab the value in the input field
	                            var seekVal = this.querySelector('input').value;

	                            // Call the api via froogaloop
	                            froogaloop.api('seekTo', seekVal);
	                        }, false);

	                        // Call setVolume when volume button clicked
	                        addEvent(volumeBtn, 'click', function(e) {
	                            // Don't do anything if clicking on anything but the button (such as the input field)
	                            if (e.target != this) {
	                                return false;
	                            }

	                            // Grab the value in the input field
	                            var volumeVal = this.querySelector('input').value;

	                            // Call the api via froogaloop
	                            froogaloop.api('setVolume', volumeVal);
	                        }, false);

	                        // Call setLoop when loop button clicked
	                        addEvent(loopBtn, 'click', function(e) {
	                            // Don't do anything if clicking on anything but the button (such as the input field)
	                            if (e.target != this) {
	                                return false;
	                            }

	                            // Grab the value in the input field
	                            var loopVal = this.querySelector('input').value;

	                            //Call the api via froogaloop
	                            froogaloop.api('setLoop', loopVal);
	                        }, false);

	                        // Call setColor when color button clicked
	                        addEvent(colorBtn, 'click', function(e) {
	                            // Don't do anything if clicking on anything but the button (such as the input field)
	                            if (e.target != this) {
	                                return false;
	                            }

	                            // Grab the value in the input field
	                            var colorVal = this.querySelector('input').value;

	                            // Call the api via froogaloop
	                            froogaloop.api('setColor', colorVal);
	                        }, false);

	                        // Call setColor with a random color when random color button clicked
	                        addEvent(randomColorBtn, 'click', function(e) {
	                            // Don't do anything if clicking on anything but the button (such as the input field)
	                            if (e.target != this) {
	                                return false;
	                            }

	                            // Generate a random color
	                            var colorVal = Math.floor(Math.random() * 16777215).toString(16);

	                            // Call the api via froogaloop
	                            froogaloop.api('setColor', colorVal);
	                        }, false);
	                    }

	                    /**
	* Sets up actions for buttons that will ask the player for something,
	* such as the current time or duration. These methods require a
	* callback function which will be called with any data as the first
	* parameter in that function.
	*/
	                    function setupGetterButtons() {
	                        var buttons = container.querySelector('div dl.getters'),
	                            timeBtn = buttons.querySelector('.time'),
	                            durationBtn = buttons.querySelector('.duration'),
	                            colorBtn = buttons.querySelector('.color'),
	                            urlBtn = buttons.querySelector('.url'),
	                            embedBtn = buttons.querySelector('.embed'),
	                            pausedBtn = buttons.querySelector('.paused'),
	                            getVolumeBtn = buttons.querySelector('.getVolume'),
	                            widthBtn = buttons.querySelector('.width'),
	                            heightBtn = buttons.querySelector('.height');

	                        // Get the current time and log it to the API console when time button clicked
	                        addEvent(timeBtn, 'click', function(e) {
	                            froogaloop.api('getCurrentTime', function (value, player_id) {
	                                // Log out the value in the API Console
	                                apiLog('getCurrentTime : ' + value);
	                            });
	                        }, false);

	                        // Get the duration and log it to the API console when time button clicked
	                        addEvent(durationBtn, 'click', function(e) {
	                            froogaloop.api('getDuration', function (value, player_id) {
	                                // Log out the value in the API Console
	                                apiLog('getDuration : ' + value);
	                            });
	                        }, false);

	                        // Get the embed color and log it to the API console when time button clicked
	                        addEvent(colorBtn, 'click', function(e) {
	                            froogaloop.api('getColor', function (value, player_id) {
	                                // Log out the value in the API Console
	                                apiLog('getColor : ' + value);
	                            });
	                        }, false);

	                        // Get the video url and log it to the API console when time button clicked
	                        addEvent(urlBtn, 'click', function(e) {
	                            froogaloop.api('getVideoUrl', function (value, player_id) {
	                                // Log out the value in the API Console
	                                apiLog('getVideoUrl : ' + value);
	                            });
	                        }, false);

	                        // Get the embed code and log it to the API console when time button clicked
	                        addEvent(embedBtn, 'click', function(e) {
	                            froogaloop.api('getVideoEmbedCode', function (value, player_id) {
	                                // Use html entities for less-than and greater-than signs
	                                value = value.replace(/</g, '&lt;').replace(/>/g, '&gt;');

	                                // Log out the value in the API Console
	                                apiLog('getVideoEmbedCode : ' + value);
	                            });
	                        }, false);

	                        // Get the paused state and log it to the API console when time button clicked
	                        addEvent(pausedBtn, 'click', function(e) {
	                            froogaloop.api('paused', function (value, player_id) {
	                                // Log out the value in the API Console
	                                apiLog('paused : ' + value);
	                            });
	                        }, false);

	                        // Get the paused state and log it to the API console when time button clicked
	                        addEvent(getVolumeBtn, 'click', function(e) {
	                            froogaloop.api('getVolume', function (value, player_id) {
	                                // Log out the value in the API Console
	                                apiLog('volume : ' + value);
	                            });
	                        }, false);

	                        // Get the paused state and log it to the API console when time button clicked
	                        addEvent(widthBtn, 'click', function(e) {
	                            froogaloop.api('getVideoWidth', function (value, player_id) {
	                                // Log out the value in the API Console
	                                apiLog('getVideoWidth : ' + value);
	                            });
	                        }, false);

	                        // Get the paused state and log it to the API console when time button clicked
	                        addEvent(heightBtn, 'click', function(e) {
	                            froogaloop.api('getVideoHeight', function (value, player_id) {
	                                // Log out the value in the API Console
	                                apiLog('getVideoHeight : ' + value);
	                            });
	                        }, false);
	                    }

	                    /**
	* Adds listeners for the events that are checked. Adding an event
	* through Froogaloop requires the event name and the callback method
	* that is called once the event fires.
	*/
	                    function setupEventListeners() {
	                        var checkboxes = container.querySelector('.listeners'),
	                            loadProgressChk = checkboxes.querySelector('.loadProgress'),
	                            playProgressChk = checkboxes.querySelector('.playProgress'),
	                            playChk = checkboxes.querySelector('.play'),
	                            pauseChk = checkboxes.querySelector('.pause'),
	                            finishChk = checkboxes.querySelector('.finish'),
	                            seekChk = checkboxes.querySelector('.seek');

	                        function onLoadProgress() {
	                            if (loadProgressChk.checked) {
	                                froogaloop.addEvent('loadProgress', function(data) {
	                                    apiLog('loadProgress event : ' + data.percent + ' : ' + data.bytesLoaded + ' : ' + data.bytesTotal + ' : ' + data.duration);
	                                });
	                            }
	                            else {
	                                froogaloop.removeEvent('loadProgress');
	                            }
	                        }

	                        function onPlayProgress() {
	                            if (playProgressChk.checked) {
	                                froogaloop.addEvent('playProgress', function(data) {
	                                    apiLog('playProgress event : ' + data.seconds + ' : ' + data.percent + ' : ' + data.duration);
	                                });
	                            }
	                            else {
	                                froogaloop.removeEvent('playProgress');
	                            }
	                        }

	                        function onPlay() {
	                            if (playChk.checked) {
	                                froogaloop.addEvent('play', function(data) {
	                                    apiLog('play event');
	                                });
	                            }
	                            else {
	                                froogaloop.removeEvent('play');
	                            }
	                        }

	                        function onPause() {
	                            if (pauseChk.checked) {
	                                froogaloop.addEvent('pause', function(data) {
	                                    apiLog('pause event');
	                                });
	                            }
	                            else {
	                                froogaloop.removeEvent('pause');
	                            }
	                        }

	                        function onFinish() {
	                            if (finishChk.checked) {
	                                froogaloop.addEvent('finish', function(data) {
	                                    apiLog('finish');
	                                });
	                            }
	                            else {
	                                froogaloop.removeEvent('finish');
	                            }
	                        }

	                        function onSeek() {
	                            if (seekChk.checked) {
	                                froogaloop.addEvent('seek', function(data) {
	                                    apiLog('seek event : ' + data.seconds + ' : ' + data.percent + ' : ' + data.duration);
	                                });
	                            }
	                            else {
	                                froogaloop.removeEvent('seek');
	                            }
	                        }

	                        // Listens for the checkboxes to change
	                        addEvent(loadProgressChk, 'change', onLoadProgress, false);
	                        addEvent(playProgressChk, 'change', onPlayProgress, false);
	                        addEvent(playChk, 'change', onPlay, false);
	                        addEvent(pauseChk, 'change', onPause, false);
	                        addEvent(finishChk, 'change', onFinish, false);
	                        addEvent(seekChk, 'change', onSeek, false);

	                        // Calls the change event if the option is checked
	                        // (this makes sure the checked events get attached on page load as well as on changed)
	                        onLoadProgress();
	                        onPlayProgress();
	                        onPlay();
	                        onPause();
	                        onFinish();
	                        onSeek();
	                    }

	                    /**
	* Sets up actions for adding a new clip window to the page.
	*/
	                    function setupAddClip() {
	                        var button = container.querySelector('.addClip'),
	                            newContainer;

	                        addEvent(button, 'click', function(e) {
	                            // Don't do anything if clicking on anything but the button (such as the input field)
	                            if (e.target != this) {
	                                return false;
	                            }

	                            // Gets the index of the current player by simply grabbing the number after the underscore
	                            var currentIndex = parseInt(player_id.split('_')[1]),
	                                clipId = button.querySelector('input').value;

	                            newContainer = resetContainer(container.cloneNode(true), currentIndex+1, clipId);

	                            container.parentNode.appendChild(newContainer);
	                            $f(newContainer.querySelector('iframe')).addEvent('ready', ready);
	                        });

	                        /**
	* Resets the duplicate container's information, clearing out anything
	* that doesn't pertain to the new clip. It also sets the iframe to
	* use the new clip's id as its url.
	*/
	                        function resetContainer(element, index, clipId) {
	                            var newHeading = element.querySelector('h2'),
	                                newIframe = element.querySelector('iframe'),
	                                newCheckBoxes = element.querySelectorAll('.listeners input[type="checkbox"]'),
	                                newApiConsole = element.querySelector('.console .output'),
	                                newAddBtn = element.querySelector('.addClip');

	                            // Set the heading text
	                            newHeading.innerText = 'Vimeo Player ' + index;

	                            // Set the correct source of the new clip id
	                            newIframe.src = 'http://player.vimeo.com/video/' + clipId + '?api=1&player_id=player_' + index;
	                            newIframe.id = 'player_' + index;

	                            // Reset all the checkboxes for listeners to be checked on
	                            for (var i = 0, length = newCheckBoxes.length, checkbox; i < length; i++) {
	                                checkbox = newCheckBoxes[i];
	                                checkbox.setAttribute('checked', 'checked');
	                            }

	                            // Clear out the API console
	                            newApiConsole.innerHTML = '';

	                            // Update the clip ID of the add clip button
	                            newAddBtn.querySelector('input').setAttribute('value', clipId);

	                            return element;
	                        }
	                    }

	                    setupSimpleButtons();
	                    setupModifierButtons();
	                    setupGetterButtons();
	                    setupEventListeners();
	                    setupAddClip();

	                    // Setup clear console button
	                    var clearBtn = container.querySelector('.console button');
	                    addEvent(clearBtn, 'click', function(e) {
	                        apiConsole.innerHTML = '';
	                    }, false);

	                    apiLog(player_id + ' ready!');
	                }
	            })();