var SLImageChanger = Class.create();
SLImageChanger.prototype = {
	initialize: function(id, images, speed) {
		this.id = id;
		this.images = images;
		this.speed = speed;
		this.pos = 1;
		
		setTimeout(this.onTimeout.bind(thid), this.speed);
	},
	
	onTimeout: function(){ 
		$(this.id).src = this.images[this.pos++];
		if(this.pos == this.images.length){
			this.pos = 0;
		}
			
		setTimeout(this.onTimeout.bind(this), this.speed); 
	} 
}

function slChangeImages(id, images, speed){
	new SLImageChanger(id, images, speed);
}

var SLImageView = Class.create();
SLImageView.prototype = {
    initialize: function(id) {
	this.id = id;
	this.images = new Array();
    },

    add : function(url){
	this.images.push(url);
    },
    
    show : function(index) {
	$(this.id).src = this.images[index];
    } 
}


var SLImageFader = Class.create();
SLImageFader.prototype = {
    initialize: function(id, speed) {
	this.id = id;
    	this.images = new Array();
	this.texts = new Array();
	this.speed = speed * 1000;
	
	this.showTexts = $(id+ '_t')!=null;
   		
   	this.pos = 1;
	
	this.links = new Array();
	this.useLinks = false;
    },

    add : function(url, text, link) {
	this.images.push(url);
	this.texts.push(text);
	this.links.push(link);
	
	if(link!=null){
	    this.useLinks = true;
	}
		
	if(this.images.length==1){
	    this.registerTimeout();
	}
    	
    },

    registerTimeout: function() {
	setTimeout(this.onTimeout.bind(this), this.speed);
    },

    onTimeout: function() {
	new Effect.Opacity(this.id+'_v', 
	{
	    duration:0.5,
	    from:1.0,
	    to:0.1,
	    afterFinish:this.onFadeOut.bind(this)
	});
    },
    	
    onFadeOut: function() {
	if(this.pos == this.images.length){
    	    this.pos = 0;
    	}
	
	var img = $(this.id+'_v');
	
	img.src = this.images[this.pos];
    		
    	if(this.showTexts){
	    var text = this.texts[this.pos];
	    if(text != null){
		Element.update(this.id+'_t', text);
	    }else{
		Element.update(this.id+'_t', "");
	    }
    	}
	
	if(this.useLinks){
	    var link = this.links[this.pos];
	    if(link!=null){
		var a = img.up();
		if(a!=null){
		    a.href=link;
		} 
	    }
	}
    		
    	this.pos++;		
    		
    	new Effect.Opacity(this.id+'_v', 
	{
	    duration:0.5,
	    from:0.1,
	    to:1.0,
	    afterFinish:this.onFadeIn.bind(this)
	});
    },
    	
    onFadeIn : function() {
	this.registerTimeout();
    }
 }


var SLAccordion = Class.create();
SLAccordion.prototype = {
	initialize: function(id, duration, expanded) {
		this.accordion = $(id);
		this.duration = duration;
		this.expanded = expanded;
		Event.observe(window, 'load', this.init.bind(this));
	},
	
	init: function(){
		var elements = this.accordion.childElements();
      		
      	for (var i = 0; i < elements.length; i++) {
      		var element = elements[i];     		
			var head = element.down();
			var body = head.next();
			
			if(i+1!=this.expanded){
				body.style.display ='none'
			}else{
				this.expandedElement = element;	
			}
			
			head.observe('click', this.onClick.bind(this));            
      	}
   	},
   		
   	_getEntry : function(node){
   		do{
   			if(node.className=="gui_accordion_entry"){
   				return node;
   			}
   			
   			node = node.parentNode;
   		}while(node)
   		return null;  		
   	},
   		
   	onClick : function(event) {
   	
   		var element = this._getEntry(event.element());
   		var head = element.down();
   		
   		if(this.expandedElement == element){
   			return;
   		}
   		
   		var body = head.next();
   		var expandedBody = this.expandedElement.down().next();
        	        	    		
       	new Effect.Parallel(
       		[
            	new Effect.SlideUp(expandedBody),
   	        	new Effect.SlideDown(body)
       		],
       		{
       		duration : this.duration
   			}
      	);
       		
       	this.expandedElement = element;
	}
}

var SLImageSlider = Class.create();
SLImageSlider.prototype = {

    initialize : function(id, duration, horizontal){
	this.id = id;
	this.pos = 0;
	this.duration = duration;
	this.active = false;
	this.horizontal = horizontal;
	Event.observe(window, 'load', this.init.bind(this));
    },
    
    init : function(){
	this.images = $(this.id+'_s').getElementsByTagName('li');
	
	var next = $(this.id+'_n');
	next.observe('click', this.onNext.bind(this));
	
	var prev = $(this.id+'_p');
	prev.observe('click', this.onPrev.bind(this));
	
	this.nextImg = next.down();
	this.prevImg = prev.down();
	
	this.nextImgParts = this.nextImg.src.split('.png');
	this.prevImgParts = this.prevImg.src.split('.png');
				
	this._updateButtons();
    },
    
    _updateButtons : function(){
	if(this._getNextVisible()>=0){
	    this.nextImg.src=this.nextImgParts[0]+'.png';
	}else{
	    this.nextImg.src=this.nextImgParts[0]+'_d.png';	
	}
	
	var prev = this._getPrevVisible();
	
	if(prev!=0 || prev!=this.pos){
	    this.prevImg.src=this.prevImgParts[0]+'.png';	    
	}else{
	    this.prevImg.src=this.prevImgParts[0]+'_d.png';		
	}	
    },
        
    _getSize : function() {
	if(this.horizontal){
	    return $(this.id+'_v').getWidth();
	}
	
	return $(this.id+'_v').getHeight();
    },
    
    _getNextVisible : function () {
    
	var start = 0;
	var size = this._getSize();
        
	for(i=this.pos; i<this.images.length-1; i++){
	    var element = this.images[i];
	    if(this.horizontal){
	    	start += Element.getWidth(element);
	    }else{
		start += Element.getHeight(element);	
	    }
	    if(start >= size){
		return i+1;	
	    }
	}
    
	return -1;
    },
    
    _getPrevVisible : function () {
    
	var start = 0;
	var size = this._getSize();
    
	for(i=this.pos; i>0; i--){
	    var element = this.images[i];
	    if(this.horizontal){
	    	start += Element.getWidth(element);
	    }else{
		start += Element.getHeight(element);    
	    }
	    if(start >= size){
		return i-1;	
	    }
	}
    
	return 0;
    },
    
    _getOffset : function () {
    
        var offset = 0;
	for(i=0; i<this.pos; i++){
	    var element = this.images[i];
	    if(this.horizontal){
		offset -= Element.getWidth(element);
	    }else{
		offset -= Element.getHeight(element);	
	    }
	}    
	
	return offset;
    },
    
    
    
    _onFinish : function() {
	this.active = false;
    },
    
    onNext : function (){    
	if(this.active){
	    return;
	}
		
        var newPos = this._getNextVisible();
	if(newPos==-1){
	    return;
	}
	
	this.active = true;
	
	this.pos = newPos;
	
	if(this.horizontal){
	    new Effect.Move(this.id+'_s', {
	        x: this._getOffset(),
		mode : 'absolute', 
	        duration : this.duration,	
		afterFinish : this._onFinish.bind(this)
	    });
	}else{
	    new Effect.Move(this.id+'_s', {
	        y: this._getOffset(),
		mode : 'absolute', 
	        duration : this.duration,	
		afterFinish : this._onFinish.bind(this)	
	    });
	}
	
	this._updateButtons();	
    },
    
    onPrev : function (){
	if(this.active || this.pos == 0){
	    return;
	}
	
	this.active = true;
	
	this.pos = this._getPrevVisible();
	
	if(this.horizontal){
	    new Effect.Move(this.id+'_s', {
		x: this._getOffset(),
		mode : 'absolute',
		duration : this.duration,
		afterFinish : this._onFinish.bind(this)
	    });
	}else{
	    new Effect.Move(this.id+'_s', {
		y: this._getOffset(),
		mode : 'absolute',
		duration : this.duration,
		afterFinish : this._onFinish.bind(this)
	    });
	}
	
	this._updateButtons();
    }
    
}

var SLImageDialog = Class.create({
    initialize : function(id, images){
	this.id = id;
	this.images = new Array()
	this.image_ids = new Array();
	this.image_texts = new Array();
	this.hidden = true;
	this.closeOnClick = false;
	Event.observe(window, 'load', this.init.bind(this));
    },
    
    init : function(){   
	this.dialog = $(this.id+'_d');
	this.overlay = $(this.id+'_o');
	this.image = this._getElement('gui_img_dialog_img');
	this.imageLoader = null;
	this.shown = false;
	this.current = -1;
	this.hiddenObjects = null;
	this.currentElement = this._getElement('gui_img_dialog_current');
	this.numImagesElement = this._getElement('gui_img_dialog_num_images');
	
	this.textElement = this._getElement('gui_img_dialog_text');	
	
	this._reparent(this.overlay);
	this._reparent(this.dialog);

	this.overlay.observe('click', this._hideDialog.bind(this));
	
	var element = this._getElement('gui_img_dialog_close');
	if(element!=null){
	    element.observe('click', this._hideDialog.bind(this));
	}
	
	element = this._getElement('gui_img_dialog_next');
	if(element!=null){
	    element.observe('click', this._onNext.bind(this));
	}
	
	element = this._getElement('gui_img_dialog_prev');
	if(element!=null){
	    element.observe('click', this._onPrev.bind(this));
	}
	
	this.image.observe('click', this._onImgClick.bind(this));
    },
    
    setCloseOnClick : function() {
	this.closeOnClick = true;
    },
    
    _getElement : function(className) {
	var elements = this.dialog.getElementsByClassName(className);
	if(elements == null){
	    return null;
	}
	
	return elements[0];
    },

    _onImgClick : function() {
	if(this.closeOnClick){
	    this._hideDialog();
	    return;
	}
    
	if(this.current < this.images.length-1){
	    this.current++;
	}else{
	    this.current = 0;
	}
	this._changeImage();
    },
    
    _onNext : function() {
	if(this.current < this.images.length-1){
	    this.current++;
	    this._changeImage();	
	}
    },
    
    _onPrev : function() {
	if(this.current>0){
	    this.current--;
	    this._changeImage();
	}
    },
    
    _updateNextPrev : function() {
	element = this._getElement('gui_img_dialog_next');
	if(element!=null){
	    if(this.current<this.images.length-1){
		element.style.visibility = 'visible';
	    }else{
		element.style.visibility = 'hidden';	
	    }
	}
	
	element = this._getElement('gui_img_dialog_prev');
	if(element!=null){
	    if(this.current>0){
		element.style.visibility = 'visible';
	    }else{
		element.style.visibility = 'hidden';	
	    }
	}
    },
    
    add : function(image, text){
	this.images.push(image);
	this.image_texts.push(text);
    },
    
    addWithID : function(image, image_id, text){
	this.images.push(image);
	this.image_ids.push(image_id); 
	this.image_texts.push(text);
    },
                
    _reparent : function(element) {
	var parent = element.up();
	
	if(parent!=null){
	    element.remove();
	}
	
	var body = document.getElementsByTagName('body').item(0);
	
	body.appendChild(element); 	
    },
        
    _showDialog : function() {
	
	if(this.numImagesElement != null){
	    this.numImagesElement.update(this.images.length);
	}
    
	this.overlay.setStyle({
	    width: document.viewport.getWidth()+"px",
	    height: document.viewport.getHeight()+"px"
	});
	
	var scroll = document.viewport.getScrollOffsets();
	this.overlay.setStyle({
	    left: scroll[0]+"px",
	    top: scroll[1]+"px"
	});
	
        this.hidden = false;

	new Effect.Appear(this.overlay,{
	    duration : 1.0,
	    from : 0.0,
	    to : 0.4,
	    afterFinish : this._changeImage.bind(this)
	});
    },
    
    _hideDialog : function() {
	this.hidden = true;
	this.overlay.style.display = 'none';
	this.dialog.style.display = 'none';
	this._showObjects();
    },
    
    _onImageLoad : function() {
	this.image.src = this.images[this.current];
	
	if(this.currentElement!=null){
	    this.currentElement.update(this.current+1);
	}
	
	if(this.textElement!=null){
	    var text = this.image_texts[this.current];
	    if(text!=null){
		this.textElement.update(text);
	    }else{
		this.textElement.update("");	    
	    }
	}
	
	this._updateNextPrev();
	
	var posX = document.viewport.getWidth() / 2;
	var posY = document.viewport.getHeight() / 2;
	
	//posX -= this.imageLoader.width / 2;
	//posY -= this.imageLoader.height / 2;
	posX -= Element.getWidth(this.dialog) / 2;
	posY -= Element.getHeight(this.dialog) / 2;
	
	var scroll = document.viewport.getScrollOffsets();
	posX += scroll[0];
	posY += scroll[1];
	
	if(this.hidden){
	    return;
	}
	
        new Effect.Parallel([	
		new Effect.Move(this.dialog, {
		    duration : 0.0,
		    mode : 'absolute',
		    x : posX,
		    y : posY
		}),
		new Effect.Appear(this.dialog, {
		    duration : 0.0
		})
		/*
		,
		new Effect.Morph(this.dialog, {
		    duration : 5.0,
		    width : this.imageLoader.width,
		    height : this.imageLoader.height
		})
		*/
		]
		
	);
    },
    
    _changeImage : function() {	
	this.imageLoader = new Image();
	    
	this.imageLoader.onload = this._onImageLoad.bind(this);
	this.imageLoader.src = this.images[this.current];
    },
        
    show : function(i){
        if((!this.hidden && this.current == i) || i>=this.images.length){
	    return;
	}
		
	this.current = i;
	
	if(this.hidden){
	    this._hideObjects();
	    this._showDialog();
	}else{	    
    	    this._changeImage();
	}
    },
    
    showById : function(image_id){
	for(i=0; i<this.images.length; i++){
	    if(this.image_ids[i]==image_id){
		this.show(i);
		return;
	    }
	}
    },
    
    _hideObjects : function () {
	var objects = document.getElementsByTagName('object');
	
	this.hiddenObjects = new Array();
		
	for(i=0; i<objects.length; i++){
	    if(objects[i].style.visibility != 'hidden'){
		this.hiddenObjects.push(objects[i]);
		objects[i].style.visibility = 'hidden';	
	    }
	}
    },
    
    _showObjects : function() {
	if(this.hiddenObjects == null){
	    return;
	}
	
	for(i=0; i<this.hiddenObjects.length; i++){
	    this.hiddenObjects[i].style.visibility = 'visible';
	}
	
	this.hiddenObjects = null;    
    }
});

var SLSlideShow = Class.create();
SLSlideShow.prototype = {

    initialize : function(id, duration){
	this.id = id;
	this.pos = 1;
	this.duration = duration*1000;
	Event.observe(window, 'load', this.init.bind(this));
    },
    
    init : function(){
	this.registerTimeout();
    },
    
    registerTimeout: function() {
	setTimeout(this.onTimeout.bind(this), this.duration);
    },

    onTimeout: function() {
	new Effect.Opacity(this.getElementName(), 
	{
	    duration:0.5,
	    from:1.0,
	    to:0.1,
	    afterFinish:this.onFadeOut.bind(this)
	});
    },
    
    getElementName: function() {
	return this.id+"_i"+this.pos;
    },
    	
    onFadeOut: function() {
    
	var oldElement = $(this.getElementName());
    
	this.pos++;

	var newElement = $(this.getElementName());
	
	if(!newElement){
	    this.pos = 1;
	    newElement = $(this.getElementName());
	}
	
	oldElement.style.display = 'none';

	Element.setOpacity(newElement, 0.0);
	newElement.style.display = 'block';
	
    	new Effect.Opacity(newElement,
	{
	    duration:0.5,
	    from:0.1,
	    to:1.0,
	    afterFinish:this.onFadeIn.bind(this)
	});
	

    },
    	
    onFadeIn : function() {
	this.registerTimeout();
    }
}