var videos = new Array();
var vId = 0;
var vc = 0;

function video()
{
   var description = "DESCRPTION UNDEFINED";
   var name = "NAME UNDEFINED";
   var date = "DATE UNDEFINED";
   var id  = "ID UNDEFINED";
   
   this.get_id   = function() {return this.id;}
   this.get_name = function() {return this.name;}
   this.get_desc = function() {return this.description;}
   this.get_date = function() {return this.date;}
    
   this.init = function(v_id,v_desc,v_name,v_date)
   {
     this.id = v_id;
     this.description = v_desc;
     this.name = v_name;
     this.date = v_date;
   }
}

function add_video(id,desc,name,date)
{
  var new_video = new video();
  new_video.init(id,desc,name,date);
  videos[vc] = new_video;
  vc++;
}

function show_videos()
{
  var page_size=4;
  var no_pages = Math.floor(vc/page_size);
  if (vc%page_size!=0) no_pages++;

  var html="";
  for (var i=0;i<no_pages-1;i++)
  {
      html+="<div class=\"page\">";
     for (var j=0;j<page_size;j++)
     {
        var video = videos[page_size*i+j];
        html+="<div class=\"video\"><img src=\"media/img_"+video.get_id()+".jpg\" /><div class=\"name\">"+video.get_desc()+"</div><div class=\"author\">"+video.get_name()+"</div><div class=\"date\">"+video.get_date()+"</div></div>";
     }
      html+="</div>";
  }
  html+="<div class=\"page\">";
  for (var i=vc-page_size;i<vc;i++)
  {
     var video = videos[i];
    html+="<div class=\"video\"><img src=\"media/img_"+video.get_id()+".jpg\" /><div class=\"name\">"+video.get_desc()+"</div><div class=\"author\">"+video.get_name()+"</div><div class=\"date\">"+video.get_date()+"</div></div>";
  }
  html+="</div>";
  $("#items").append(html);
}

function change_video(videoId, autoPlay)
{
 for (var i=0;i<vc;i++)
   if (videos[i].get_id()==videoId)
   {
     vId = i;
     break;
   }  
$f("player", "flowplayer/flowplayer-3.2.1.swf", {

	playlist: [		
	
		// splash image
		'media/splash'+videoId+'.jpg',
		
		// video
		{url: "media/video"+videoId+".flv" , autoPlay: autoPlay, autoBuffering: true}
	]	
});

}         

function change_video_left()
{
  if (vId==0) change_video(videos[vc-1].get_id(),false);
  else change_video(videos[vId-1].get_id(),false);
}

function change_video_right()
{
  if (vId==vc-1) change_video(videos[0].get_id(),false);
  else change_video(videos[vId+1].get_id(),false);
}



$(function() {
	$.ajax
	({
	    type: "GET",
		url: "videos.xml",
		dataType: ($.browser.msie) ? "text" : "xml",
		success: function(data)
		{		
		
	         var xml;
             if (typeof data == "string") 
             {
               xml = new ActiveXObject("Microsoft.XMLDOM");
               xml.async = false;
               xml.loadXML(data);
             } else 
             {
               xml = data;
             }
		
			$(xml).find('videos').each(function()
			{
				$(this).find('video').each(function()
			{
				var id = $(this).find('id').text();
				var desc = $(this).find('desc').text();
				var name = $(this).find('name').text();
				var date = $(this).find('date').text();				
				add_video(parseInt(id), desc,name, date);
			});
								
			});
			show_videos();
            initScrollable();
		}

	});

});

function initScrollable()
{
$(".scrollable").scrollable();   
$(".items img").click(function() {
	if ($(this).hasClass("active")) { return; }
	var movieId = $(this).attr("src");
	var pos = movieId.indexOf("img_");
	movieId = movieId.replace(".jpg", "");
	movieId = movieId.slice(pos+4);
    change_video(parseInt(movieId),true); 
	// activate item
	$(".items img").removeClass("active");	$(this).addClass("active");
})
}