// ajax postback to youtube script
var videos = [];

function swapVideo(videoId) {
    if (videos == null)
        return;
    if (videos.length == 0)
        return;
    for (var i = 0; i < videos.length; i++) {
        if (videoId == videos[i].Id) {
            var video = videos[i];
            var description = $('#video-description');
            description.empty();
            description.append('<div class="video-title">' + video.Title + '</div>');
            description.append('<div class="video-text">' + video.Description + '</div>');
            // video playback elements
            // recreate object and embed for ie/chrome
            var playback = $('#video-playback');
            playback.empty();
            playback.append('<object width="315" height="270"><param name="movie" value="http://www.youtube.com/v/' + video.Id + '?fs=1&amp;hl=en_US" />' +
                        '<param name="allowFullScreen" value="true" />' +
                        '<param name="allowscriptaccess" value="always" />' +
                        '<embed src="http://www.youtube.com/v/' + video.Id + '?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="315" height="270" /></object>');
            break;
        }
    }
}
$(document).ready(function () {
    $('#video-container a.swap-video').live('click', function (e) {
        var videoid = $(this).attr('videoid');
        swapVideo(videoid);
        e.preventDefault();
    });

    jQuery.ajax({
        type: 'POST',
        url: 'Services/VideoService.asmx/GetYouTubeFeed',
        data: '{}',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            if (msg.d == null)
                return;
            videos = msg.d;
            var video = videos[0];
            // show main video
            var description = $('#video-description');
            description.empty();
            description.append('<div class="video-title">' + video.Title + '</div>');
            description.append('<div class="video-text">' + video.Description + '</div>');
            // video playback elements
//            var playback_object = $('#video-playback object param[name=\'movie\']');
//            var playback_embed = $('#video-playback embed');
//            playback_object.attr('value', 'http://www.youtube.com/v/' + video.Id + '?fs=1&amp;hl=en_US');
//            playback_embed.attr('src', 'http://www.youtube.com/v/' + video.Id + '?fs=1&amp;hl=en_US');
            // recreate object and embed for ie/chrome
            var playback = $('#video-playback');
            playback.append('<object width="315" height="270"><param name="movie" value="http://www.youtube.com/v/' + video.Id + '?fs=1&amp;hl=en_US" />' +
                        '<param name="allowFullScreen" value="true" />' +
                        '<param name="allowscriptaccess" value="always" />' +
                        '<embed src="http://www.youtube.com/v/' + video.Id + '?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="315" height="270" /></object>');

            // additional videos
            var additional = $('#video-list ul');
            additional.empty();
            for (var i = 0; i < videos.length; i++) {
                additional.append('<li><a class="swap-video" videoid="' + videos[i].Id + '" href="#"><img src="' + videos[i].ThumbnailUrl + '" width="125" height="98" alt="' + videos[i].Title + '" /></a></li>');
            }
        },
        error: function (xhr, status, error) {
            // show videos not loaded message
            //handleWebServiceError('An error occurred while adding the location.');
        }
    });
});