/*
  BarackSlideshow 0.2
    - Libraries required: MorphList <http://devthought.com>
    - MooTools version required: 1.2
    - MooTools components required: 
        Core: (inherited from MorphList)
        More: Assets
  
    Changelog:
    - 0.1: First release
    - 0.2: Added 'transition' option. Can be slide-(bottom|top|left|right) or fade, or a function that returns any of those values
           Added 'tween' to options to customize the transition effect
           BarackSlideshow::show now also alters the menu state
           Other tiny changes
*/
/*! Copyright: Guillermo Rauch <http://devthought.com/> - Distributed under MIT - Keep this message! */
//var $j = jQuery.noConflict();
var timer;
var in_animate=false;
var first_time=true;
var topp;
function opera_show_on_menu(current)
{
	hide_on_menu();
	document.getElementById('on_menu').style.visibility="visible";
	document.getElementById('on_menu_' + current).style.visibility="visible";
	document.getElementById('play_pause').style.visibility="visible";
	document.getElementById('close_btn').style.visibility="visible";
}

function hide_on_menu()
{
	document.getElementById('on_menu').style.visibility="hidden";
	document.getElementById('on_menu_bg').style.visibility="hidden";
	document.getElementById('on_menu_1').style.visibility="hidden";
	document.getElementById('on_menu_2').style.visibility="hidden";
	document.getElementById('on_menu_3').style.visibility="hidden";
	document.getElementById('on_menu_4').style.visibility="hidden";
	//document.getElementById('close_btn').style.visibility="hidden";
	//document.getElementById('play_pause').style.visibility="hidden";
}

function move_up(Id)
{
	var elem=document.getElementById(Id);
	elem.style.top=(parseInt(elem.style.top)-1) + "px";
	//alert(elem.offsetBottom);
	if(parseInt(elem.style.top)<=parseInt(topp))
	{
		elem.style.top=topp;
		clearInterval(timer);
		in_animate=false;
		current_tab_id=null;
	}
}
function slide_up(Id,current)
{
	hide_on_menu();
	document.getElementById('on_menu').style.visibility="visible";
	document.getElementById('on_menu_' + current).style.visibility="visible";
	document.getElementById('play_pause').style.visibility="visible";
	document.getElementById('close_btn').style.visibility="visible";
	
	//document.getElementById('on_menu_bg').style.visibility="visible";
	current="#on_menu_"+current;
	
	//document.getElementById("on_menu").style.visibility="visible";
	//document.getElementById("on_menu_bg").style.display="block";
	//$$(current).fade('show');
	//$$('#on_menu #play_pause').fade('show');
	//$$('#on_menu #close_btn').fade('show');
	if(in_animate )
		return;
	in_animate=true;
	var elem=document.getElementById(Id);
	var height=parseInt(elem.offsetHeight);
	//elem.style.top="0px";
	//var real_top=parseInt(elem.style.top);
	elem.style.top=(parseInt(topp)+height)+"px";
	timer=setInterval("move_up('" +Id+ "')",10);
}

var BarackSlideshow = new Class({
  
  Extends: MorphList,
  
  options: {/*
    onShow: $empty,*/
    auto: true,
    autostart: true,
    autointerval: 5000,
    transition: 'fade',
    tween: { duration: 700 }
  },
  
  initialize: function(menu, images, loader, options) {
    this.parent(menu, options);
    this.images = $(images);
    this.imagesitems = this.images.getChildren().fade('hide');
    $(loader).fade('in');
    new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() {
      this.loaded = true;      
      $(loader).fade('out');
      if(this.current) this.show(this.menuitems.indexOf(this.current));
      else if(this.options.auto && this.options.autostart) this.progress();
    }.bind(this) });
    if($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition);
  },
  
  auto: function(){
    if(! this.options.auto) return false;
    $clear(this.autotimer);
    this.autotimer = this.progress.delay(this.options.autointerval, this);
  },
  			
  click: function(ev, item) {
    this.parent(ev, item);
    new Event(ev).stop();
    this.show(this.menuitems.indexOf(item));
    $clear(this.autotimer);
  },
  
  show: function(index) {
	
	
	document.getElementById('on_menu').style.height= document.getElementById('on_menu_' + (index+1)).offsetHeight+2+"px";
	if(document.getElementById('on_menu').offsetHeight > document.getElementById('slideshow').offsetHeight-30)
		document.getElementById('on_menu').style.height=document.getElementById('slideshow').offsetHeight+"px";
	document.getElementById('on_menu').style.top=(document.getElementById('slideshow').offsetHeight - document.getElementById('on_menu').offsetHeight-26)+ "px";
	var my_id='#on_menu_' + (index+1);//my_id is id of on_menu element that should be shown
	//$$('#on_menu #play_pause').fade('show');
	//$$('#on_menu #on_menu_1,#on_menu #on_menu_2,#on_menu #on_menu_3,#on_menu #on_menu_4,#on_menu span').fade('hide');
	hide_on_menu();
	if(in_animate)
	{
		clearInterval(timer);
		in_animate=false;
		current_tab_id=null;
	}
	//alert(index+1);	
	var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
	if(!window.opera && !is_chrome)
		topp = document.getElementById('on_menu').style.top;
	first_time=false;
	
	setTimeout("document.getElementById('on_menu').style.visibility='visible'",1500);
	
	if(!window.opera && !is_chrome)
		setTimeout("slide_up('on_menu',"+ (index+1) +")",1500);
	else
		setTimeout("opera_show_on_menu("+ (index+1) +")",1500);
		
    if(! this.loaded) return;
    var image = this.imagesitems[index];    
		if(image == this.curimage) return;
    image.set('tween', this.options.tween).dispose().inject(this.curimage || this.images.getFirst(), this.curimage ? 'after' : 'before').fade('hide');
		image.getElement('img').setStyle('display', 'block');
    var trans = this.options.transition.run(null, this).split('-');
    switch(trans[0]){
      case 'slide': 
        var dir = $pick(trans[1], 'left');
        var prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
        image.fade('show').setStyle(prop, image['offset' + (prop == 'left' ? 'Width' : 'Height')] * ((dir == 'bottom' || dir == 'right') ? 1 : -1)).tween(prop, 0); 
        break;
      case 'fade': image.fade('in'); break;
    }
    image.get('tween').chain(function() { 
      this.auto();
      this.fireEvent('show', image); 
    }.bind(this));
    this.curimage = image;
    this.setCurrent(this.menuitems[index])
    this.morphTo(this.menuitems[index]);
		return this;
  },
  
  progress: function(){
    var curindex = this.imagesitems.indexOf(this.curimage);
    this.show((this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0);
  }
  
});