/**
 * Current time spent: 4,5h (incl mosaic_create.php)
 * @author Sascha Goldhofer
 */
var Mosaic = new Class({
    
    element:	null,
    tiles:		new Array(),
    pictures:	new Array(),
    index:		0,
    
    initialize: function(container) {
    
    	this.element = $(container);
    	
    	// get pictures (folders)
    	$(document.body).getElements('ul.mosaic_picture').each(function(pictureList) {
    		this.pictures.include(pictureList.get('folder'));
    	}.bind(this));
    	// create Tiles
    	this.element.getElements('img').each(function(image) { this.tiles.include(new Mosaic.Tile(image)); }.bind(this));
    },
    
    flip: function() {
    	
    	var row			= 8;
    	var index		= 1;
    	var delay		= 60;
    	var currentdelay= 0;
    	// animation in diagonale
    	/*
    		0	1	2	3	4
    		1	2	3	4	5
    		2	3	4	5	6
    		3	4	5	6	7
    	*/
    	this.tiles.each(function(tile){

    		currentdelay += delay;

    		if (currentdelay > (row)*delay) {
    			index++;
    			currentdelay = index*delay;
    		}
    		
    		tile.setNext(this.pictures[this.index]);
    		tile.flipIn(currentdelay);
    		
    	}.bind(this));
    	
    	this.index++;
    	if (this.index >= this.pictures.length) this.index=0;
    }
});
Mosaic.Tile = new Class({
    
    img:		null,    
    imgsrc:		'',   
    nextsrc:	'',
    
    column:		0,
    row:		0,
    
    flipFx:	null,
    
    initialize: function(image) {
    
    	this.img	= image;
    	this.nextsrc= this.img.get('src');
    	this.column = this.img.get('column');
    	this.row	= this.img.get('row');
    	// init fx
    	this.flipFx = new Fx.Morph(this.img, { duration: 400 });
    },
    
    flipIn: function(delay) { this.flip.bind(this).delay(delay); },
    setNext: function(folder) { this.nextsrc = folder+this.column+'_'+this.row+'.jpg'; },
    
    flip: function() {
		
    	this.flipFx.start({
    		'left':		[0, 60],
    		'width':	[120, 0],
    		'height':	[81, 81] 		
    	}).chain(function(){
    		this.img.set('src', this.nextsrc);
    		this.flipFx.start({
    			'left':		[60, 0],
    			'width':	[0, 120],
    			'height':	[81, 81]
    		});
    	}.bind(this));
    }
});

window.addEvent('domready', function() {

    $('menu-item-203').getElement('a').set('href', '#');
    $('menu-item-209').getElement('a').set('href', '#');

	if ($('menu-item-203')) {
	   var lala = $$('#menu-item-203 ul');

        //if (/android|iphone|ipod|ipad|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
        //}        

        $('menu-item-203').addEvent('mouseover', function(event){
            event.stop();
            lala.tween('height', '300px');
        });
/*
        $('menu-item-203').addEvent('click', function(event){
            event.stop();
            lala.tween('height', '300px');
        });
*/                
        $('menu-item-203').addEvent('mouseout', function(event){
            event.stop();
            lala.tween('height', '0px');

        });        
	}


	if ($('menu-item-209')) {
	   var lala2 = $$('#menu-item-209 ul');
        
        $('menu-item-209').addEvent('mouseover', function(event){
            event.stop();
            lala2.tween('height', '300px');
        });

/*
        $('menu-item-209').addEvent('click', function(event){
            event.stop();
            lala2.tween('height', '300px');
        });
*/                
        $('menu-item-209').addEvent('mouseout', function(event){
            event.stop();
            lala2.tween('height', '0px');

        });        
	}
	
	
	/**
	 * Init mosaic animation
	*/ 
	var mosaicContainer = $('mosaic');
	if (mosaicContainer) {
		var mosaic = new Mosaic(mosaicContainer);
		var intervalID = mosaic.flip.periodical(10000, mosaic);
	}
});