var init_positions = new Array();
var current_items = new Array();
var unactive_items = new Array();
var left_bound = new Object();
var right_bound = new Object();
var items_count_to_show = 0;

window.onload = function() {
   buildCarousel('flags', 6, 'left_p', 'right_p');
}

function buildCarousel(list_id, visible_items, left_btn_id, right_btn_id){
	items_count_to_show = visible_items;
	var items = $(list_id).getElements('li');//.getElementById(list_id);
	//alert(items.length);
	var step = 15;
	var init_deg = -90 - step * 3 + step * 0.5 ;//-135;
	var x_offset = $(list_id).getSize().x / 2;
	var y_offset = $(list_id).getSize().y / 2;
	
	var items_count = items.length;
	for(var i=0; i < items_count; i++){
	  items[i].setPosition({x: 1000, y:0});
	}
	
	for(var i=items_count_to_show; i < items_count; i++){
	  unactive_items.push(items[i]);//.setPosition({x: 1000, y:0});
	}
	
	
	for(var i=0; i < items_count_to_show; i++){
	  var deg = init_deg + i * step;
	  var x_c = 380 * Math.cos(deg2rad(deg));
	  var y_c = 60 * Math.sin(deg2rad(deg));
	
	  x_c += x_offset - items[i].getSize().x / 2 - 13;
	  y_c += y_offset + 55;
	  
	  
	  var obj = new Object();
	  obj.x = x_c;
	  obj.y = y_c;
	  init_positions.push(obj);
	  current_items.push(items[i]);
	  
	  items[i].setPosition({x:x_c, y:y_c});
	  
	  
	}
	
	var bound_y_offset = 10;
	var bound_x_offset = 100;
	
	left_bound.x = init_positions[0].x - bound_x_offset;
	left_bound.y = init_positions[0].y + bound_y_offset ;
	
	right_bound.x = init_positions[items_count_to_show - 1].x + bound_x_offset;
	right_bound.y = init_positions[items_count_to_show - 1].y + bound_y_offset;
	
	$(left_btn_id).addEvent('click', left_btn_click);
	$(right_btn_id).addEvent('click', right_btn_click);
	//alert(init_positions[5].x);
	
}

var left_btn_click = function(){ 
 
   var off = new Fx.Morph(current_items[0], {duration: 400, transition: Fx.Transitions.Sine.easeOut});
   
   /*off.addEvent('complete', function(e){
	 e.hide();								 
   });*/
 
   off.start({
     'left': [init_positions[0].x, left_bound.x], 
     'top': [init_positions[0].y, left_bound.y],
	 'opacity': 0
   });
	
  for(var i=1; i<items_count_to_show; i++){
    var off = new Fx.Morph(current_items[i], {duration: 400, transition: Fx.Transitions.Sine.easeOut});
    off.start({
      'left': [init_positions[i].x, init_positions[i-1].x], 
      'top': [init_positions[i].y, init_positions[i-1].y]  
    });

  }
  
  unactive_items.push(current_items.shift());
  
  var r_new_item = unactive_items.shift();
  
  current_items.push(r_new_item);
  
   var off = new Fx.Morph(r_new_item, {duration: 400, transition: Fx.Transitions.Sine.easeOut});
    off.start({
      'left': [right_bound.x, init_positions[items_count_to_show-1].x], 
      'top': [right_bound.y, init_positions[items_count_to_show-1].y] ,
	  'opacity' : [0, 1]
    });

  
} 

var right_btn_click = function(){ 
   
   var off = new Fx.Morph(current_items[items_count_to_show-1], {duration: 400, transition: Fx.Transitions.Sine.easeOut});
    off.start({
      'left': [init_positions[items_count_to_show-1].x, right_bound.x], 
      'top': [init_positions[items_count_to_show-1].y, right_bound.y] ,
	  'opacity':0
    });
	
  for(var i=0; i< (items_count_to_show-1); i++){
    var off = new Fx.Morph(current_items[i], {duration: 400, transition: Fx.Transitions.Sine.easeOut});
 
    off.start({
      'left': [init_positions[i].x, init_positions[i+1].x], 
      'top': [init_positions[i].y, init_positions[i+1].y]  
    });
  }
  
  unactive_items.unshift(current_items.pop());
  
  var l_new_item = unactive_items.pop();
  
  current_items.unshift(l_new_item);
  
   var off = new Fx.Morph(l_new_item, {duration: 400, transition: Fx.Transitions.Sine.easeOut});
    off.start({
      'left': [left_bound.x, init_positions[0].x], 
      'top': [left_bound.y, init_positions[0].y],
	  'opacity' : [0, 1]
    });

  
} 

function deg2rad (angle) { 
    return (angle/180)*Math.PI;
}