/**
 * Fallback for video functionality
 * mainly used on the ipad
 *
 * fallback for coverflow included
 */
 
 
    
/**
 * Initializes the coverflow
 *
 * @param elem where to display the coverflow
 */
function Coverflow(elem, config) {
    this.element = elem;
    this.config = config;
    //Check flash player version
    if (!swfobject.hasFlashPlayerVersion("9.0.0")) {
        this.drawControls();
        this.drawImages();
    }
}

Coverflow.prototype = {
    actualImage : 0,
    element : null,
    config : null,
    
    /**
     * Draws the images into the image container
     */
    drawImages : function() {
        var holder = $('<div id="coverflowHolder">').css({
            position : 'absolute',
            top : '0px',
            left : '133px',
            width : ((this.config.images.length * 334) + 10) + "px"
        });
        $('#' + this.element).append(holder);
        //read the images from the json settings object
        for (var key in this.config.images) {
            var link = $('<a>').attr({
                href : this.config.images[key].url,
                target : this.config.images[key].target
            }).append($('<img>').attr({
                src : this.config.images[key].image,
                width : this.config.width,
                height : this.config.height
            }).css({
                margin : '0px',
                marginTop : this.config.yPos + "px",
                marginRight : 10,
                float : 'left'
            }));
            holder.append(link);
        }
        //add the text
        var title = $('<span id="coverflowText">').html(this.config.images[0].headline);
        $('#' + this.element).append(title);        
    },
    
    /**
     * Draws the controls (left/right)
     * in the flash players element window
     */
    drawControls : function() {
        //attach a swipe gesture to the element
        var that = this;
        $("#"+this.element).swipe({
            swipeLeft: function() { jQuery.proxy(that.moveImages(1), that); },
            swipeRight: function() { jQuery.proxy(that.moveImages(-1), that); }
        });
        //place various controls inside of the element    
        var that = this;
        var btnLeft = $('<a href="#">').click(function() {jQuery.proxy(that.moveImages(-1), that)}).append(
            $('<img class="buttonLeft" src="/pics/_buttons/btn_left.png")>'));
        $('#' + this.element).append(btnLeft);   
        var btnRight = $('<a href="#">').click(function() {jQuery.proxy(that.moveImages(1), that)}).append(
            $('<img class="buttonRight" src="/pics/_buttons/btn_right.png")>'));
        $('#' + this.element).append(btnRight);
    },
    
    /**
     * Move the images in the specified
     * direction
     *
     * @param dir int which direction to take
     */
    moveImages : function(dir) {
        this.actualImage += dir;
        //move to that image, if exists
        if (this.actualImage < 0) this.actualImage = 0;
        if (this.actualImage >= this.config.images.length) 
            this.actualImage = this.config.images.length - 1;
        //scroll
        $('#coverflowHolder').animate({
            left: -(334 * this.actualImage) + 133  
        }, 500);
        //set title
        $('#coverflowText').html(this.config.images[this.actualImage].headline);
    }
}

    
/**
 * Calls a json configuration utility URL
 *
 * @param elem the element to add the video to
 * @param jsonURL the config url to call
 */
function Player(elem, jsonURL) {
    this.element = elem;
    if (!swfobject.hasFlashPlayerVersion("9.0.0")) {
        var that = this;
        $.getJSON(jsonURL, jQuery.proxy(that.configLoaded, that));
    }
}

Player.prototype = {
    config : null,
    element : null,
    authURL : "/ws/authws.json.php?do=authStream&sid=",
    
    /**
     * Configuration loaded with data
     *
     * @param data some json string
     */
    configLoaded : function(data) {
        //save config
        this.config = data;
        //display meta information
        this.displayMeta();
    },
    
    /**
     * Displays headlines and a big 
     * play button, if a video is available
     */
    displayMeta : function() {
        //load the image into the alternative content
        $('#' + this.element).append($('<img src="' + this.config.THUMB_PATH + '">'));
        //check, if video exists
        if (this.config.ITEMS != null) {
            this.play();
        } else {
            $('#' + this.element).append($('<h1>').html(this.config.NAME + " (nicht verf&uuml;gbar)"));            
        }
    },
    
    /**
     * Authenticates the user,
     * displays the html 5 video control
     */
    play : function() {
        var that = this;
        //if it is a free video, play it directly
        if (this.config.STATE != null) {
            if (this.config.STATE == "fcb-free") {
                this.displayVideo({streamUrl : 'http://btd-flv-lbwww-01.odmedia.net/fcb-iphone' + this.config.ITEMS[0].PATH});
                return;
            }
        }
        $.getJSON(this.authURL + SESSIONID + "&streamUrl=" + "http://btd-flv-lbwww-01.odmedia.net/sec/fcb/iphone/" + this.config.ITEMS[0].PATH, 
            jQuery.proxy(that.displayVideo, that));
    },
    
    /**
     * Displays the video element inside of the 
     * alternate content
     *
     * @param data json object containing the streaming url
     */
    displayVideo : function(data) {
        $('#' + this.element).empty();
        var video = $('<video src="' + data.streamUrl + '" controls poster="' + this.config.THUMB_PATH + '">');
        $('#' + this.element).append(video);
    }
}