FLIPPER_DEFAULT_TIME_FOR_WINDOW = 5000;
FLIPPER_STAR_WIDTH = 91; // Width of star rating widget in pixels
FLIPPER_SLIDE_SPEED = 250;


function load_flipper() {
    //Create tabs based on json data
    $.ajax({
    url: '/data.json',
        dataType: 'json',
        success: function(data) {
            //var data = eval(data);
            if (data.windows.length > 0) {
                create_tabs(data);
                start_flipper(data);
            } else {
                alert('No windows loaded for flipper.')
            }
        },
        error: function(xhr, error_msg, error) {
            //alert('Problem loading data for flipper: ' + error_msg);
        }
    });
}


function create_tabs(data) {
    var tabs_list = $('<ul></ul>');
    var divs = [];
    
    
    random_indexed = [];
    for (i=0;i<data.windows.length; i++) random_indexed[i] = i;
    for (i=5;i<data.windows.length; i++)  // random permutated after 5th
    {	random = Math.floor(Math.random() * (data.windows.length-i) ) + i ;
    	temp = random_indexed[i] ;
    	random_indexed[i] = random_indexed[random];
    	random_indexed[random] = temp; }

    var flipper_length = 0;
    if (data.windows.length >10)
    	flipper_length = 10;
    else
        flipper_length = data.windows.length;

    
    for (var i = 0; i < flipper_length; i++) {
        //i = random_indexed[j];
        
    	var tab_num = i + 1;
        
        $('<li></li>')
            .html('<a href="#tabs-' + tab_num + '"><div>' + tab_num + '</div></a>')
            .appendTo(tabs_list);
        
        var tab_win = data.windows[ random_indexed[i] ];

        
        divs[i] = $('<div></div>')
	        .attr('id', 'tabs-' + tab_num)
	        .html('<a href="'+ tab_win.url + '"> <img src="' + tab_win.backgroundImage + '"/> </a>');

        if (tab_win.series) {
        } else if (tab_win.description){
            var img;
			img = document.createElement('img');
			img.src = tab_win.description;
			$("#enddoc").append(img);
        }

        if (tab_win.series) {
            var info_html = '<h4 class="series_title">' + tab_win.title + '</h5>';
            if (tab_win.rating) {
                var pixel_rating = (tab_win.rating * FLIPPER_STAR_WIDTH)/5.0;
                pixel_rating = Math.round(pixel_rating);
                var style_white = 'width: ' + pixel_rating + 'px; ';
                info_html += '<div class="series_stars">'
                        + '<div class="series_stars_black" style="background-position: 0px -15px;"></div>'
                        + '<div class="series_stars_white" style="'+style_white+'"></div>'
                        + '</div>';
            }
            info_html += '<h5>' + tab_win.genre + '</h5>'
                        + '<p class="series_description">' + tab_win.description + '</p>'
                        + '<a href="' + tab_win.url + '"><img src="//dramafevertoken-a.akamaihd.net/st/img/flipper/watch_now.png" /></a>';
            $('<div class="series_info"></div>').html(info_html).appendTo(divs[i]);
        }
    }
    
    
    
    if (flipper_length <10)
	    $('<li style="height: '+39 * (10- flipper_length)+'px; " id="df-flipper-filler"> </li>')
	    .appendTo(tabs_list);
    
    
    $('#flipper').append(tabs_list);
    for (var i=0; i < divs.length; i++) {
        $('#flipper').append(divs[i]);
    }
}

function start_flipper(data) {
    var window_time = FLIPPER_DEFAULT_TIME_FOR_WINDOW;
    if (data.timeForWindow) {
        window_time = data.timeForWindow * 1000;
    }
    $("#flipper")
        .tabs({
        	fx: [{opacity: 'toggle', duration: FLIPPER_SLIDE_SPEED }, {opacity: 'toggle', duration: FLIPPER_SLIDE_SPEED}],
	    	show: function (event, ui){
	    	}
        })
        .tabs('rotate', window_time, true)
        .addClass('ui-tabs-vertical ui-helper-clearfix');
    
    $('#flipper li').removeClass('ui-corner-top').addClass('ui-corner-left');
}

function dfcburl(url)
{
	if (url.indexOf("=") == -1 )
	{
		return 'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';//url + '?dfcb=' + dfcb;
	}
	return url + '&dfcb=' + dfcb;
}

$(document).ready(function() {
    load_flipper();
});