var intervalWait = 500;
var interval = null;
window.addEvent('load', function(){
	var counter = 0;
    all.each(function(main){
	if(!main)
		return;
	main.each(function(elem){
	    if(!elem || counter == 5)
	    	return;
	    var temp = new Element('img');
	    temp.injectTop(document.body);
	    temp.set({
		'src': elem[0]
	    });
	    temp.setStyles({
		'display': 'none'
	    });
	    counter++;
	});	
    });
});
window.addEvent('domready', function(){
    $$('.prev_viewable').each(function(elem){
	elem.setStyles({
	    'cursor': 'pointer'
	});
    });
    $$('.button_previous').each(function(elem){
        var num = elem.get('id').slice(4, elem.get('id').length);
	    elem.addEvents({            
		'mouseenter': function(x){
		    if(all[num].length > 5){
			var shift = function(){
				shiftArray(num, 'left');
				displayImages(num);
			}
			interval = setInterval(shift, intervalWait);
		    }
		},
		'mouseleave': function(){
			clearInterval(interval);
		    window.clearInterval(interval);
		},
		'click': function(e){
		    e.stop();
		    if(all[num].length > 5){
	    	clearInterval(interval);
		    window.clearInterval(interval);
			shiftArray(num, 'left');
			displayImages(num);
		    }
		}
	    });
    });
    $$('.button_next').each(function(elem){
        var num = elem.get('id').slice(4, elem.get('id').length);	
	    elem.addEvents({            
		'mouseenter': function(x){
		    if(all[num].length > 5){
			var shift = function(){
				shiftArray(num, 'right');
				displayImages(num);
			}
			interval = setInterval(shift, intervalWait);
		    }
		},
		'mouseleave': function(){
			clearInterval(interval);
		    window.clearInterval(interval);
		},
		'click': function(e){
		    e.stop();
		    if(all[num].length > 5){
	    	clearInterval(interval);
		    window.clearInterval(interval);
			shiftArray(num, 'right');
			displayImages(num);
		    }
		}
	    });
    });   
    $$('.showcase').each(function(elem){
	var id = elem.get('id').slice(2, elem.get('id').length);
	dimElements(id);
	switch(all[id].length){
	    case 0: {
		    var empty = new Element('div');
		    empty.inject(elem, 'before');
		    elem.dispose();
		    //empty.set('html', '->keine Entwürfe eingereicht');
		    empty.set('html', '');
		}break;
	    case 1: {
		    $('image' + id + '.2').set({
			'src': all[id][0][0]
		    });
		    $('image' + id + '.2').addEvents({
			'click': function(){
			    location = all[id][0][1];
			}
		    });
		}break;
	    case 2: {
		    $('image' + id + '.2').set({
			'src': all[id][0][0]
		    });
		    $('image' + id + '.2').addEvents({
			'click': function(){
			    location = all[id][0][1];
			}
		    });
		    $('image' + id + '.3').set({
			'src': all[id][1][0]
		    });
		    $('image' + id + '.3').addEvents({
			'click': function(){
			    location = all[id][1][1];
			}
		    });
		}break;
	    case 3: {
		    $('image' + id + '.1').set({
			'src': all[id][0][0]
		    });
		    $('image' + id + '.1').addEvents({
			'click': function(){
			    location = all[id][0][1];
			}
		    });
		    $('image' + id + '.2').set({
			'src': all[id][1][0]
		    });
		    $('image' + id + '.2').addEvents({
			'click': function(){
			    location = all[id][1][1];
			}
		    });
		    $('image' + id + '.3').set({
			'src': all[id][2][0]
		    });
		    $('image' + id + '.3').addEvents({
			'click': function(){
			    location = all[id][2][1];
			}
		    });
		}break;
	    case 4: {
		    $('image' + id + '.1').set({
			'src': all[id][0][0]
		    });
		    $('image' + id + '.1').addEvents({
			'click': function(){
			    location = all[id][0][1];
			}
		    });
		    $('image' + id + '.2').set({
			'src': all[id][1][0]
		    });
		    $('image' + id + '.2').addEvents({
			'click': function(){
			    location = all[id][1][1];
			}
		    });
		    $('image' + id + '.3').set({
			'src': all[id][2][0]
		    });
		    $('image' + id + '.3').addEvents({
			'click': function(){
			    location = all[id][2][1];
			}
		    });
		    $('image' + id + '.4').set({
			'src': all[id][3][0]
		    });
		    $('image' + id + '.4').addEvents({
			'click': function(){
			    location = all[id][3][1];
			}
		    });
		}break;
	    case 5: {
		    all[id][5] = all[id][1];
		    displayImages(id);
		}break;
	    default: {
		displayImages(id);
	    }break;
	    addListeners();
	}
    });
    function disableSlider(id){
	$('btnl' + id).addEvents({
	    'click': function(){}
	});
        $('btnr' + id).addEvents({
	    'click': function(){}
	});
    }
    function grayElements(id){
	var opacity = '0.2';
	disableSlider(id);
	$('btnr' + id).setStyles({
	    'opacity': opacity
	});
	$('btnl' + id).setStyles({
	    'opacity': opacity
	});
	$('image' + id + '.0').setStyles({
	    'opacity': opacity
	});
	$('image' + id + '.1').setStyles({
	    'opacity': opacity
	});
	$('image' + id + '.2').setStyles({
	    'opacity': opacity
	});
	$('image' + id + '.3').setStyles({
	    'opacity': opacity
	});
	$('image' + id + '.4').setStyles({
	    'opacity': opacity
	});
	$('image' + id + '.5').setStyles({
	    'opacity': opacity
	});
    }
    function dimElements(id){
	switch(all[id].length){
	    case 1: {
		    grayElements(id);
		    $('image' + id + '.2').setStyles({
		        'opacity': '1'
		    });
		}break;
	    case 2: {
		    grayElements(id);
		    $('image' + id + '.2').setStyles({
		        'opacity': '1'
		    });
		    $('image' + id + '.3').setStyles({
		        'opacity': '1'
		    });
		}break;
	    case 3: {
		    grayElements(id);
		    $('image' + id + '.1').setStyles({
		        'opacity': '1'
		    });
		    $('image' + id + '.2').setStyles({
		        'opacity': '1'
		    });
		    $('image' + id + '.3').setStyles({
		        'opacity': '1'
		    });
		}break;
	    case 4: {
		    grayElements(id);
		    $('image' + id + '.1').setStyles({
		        'opacity': '1'
		    });
		    $('image' + id + '.2').setStyles({
		        'opacity': '1'
		    });
		    $('image' + id + '.3').setStyles({
		        'opacity': '1'
		    });
		    $('image' + id + '.4').setStyles({
		        'opacity': '1'
		    });
		}break;
	};	
    }
    
    function shiftArray(ar, dir){
        if(dir == 'right'){
                all[ar].unshift(all[ar].pop());
        }
        if(dir == 'left'){
                all[ar].push(all[ar].shift());
        }
    }
    function displayImages(ar){
	var counter = 0;
	$each(all[ar], function(x){
		if(counter == 6)
			return;
	    $('image' + ar + '.' + counter).set({
                'src': x[0],
                'alt': x[1]
            });
	    $('image' + ar + '.' + counter).removeEvents();
	    $('image' + ar + '.' + counter).addEvents({
		'click': function(){
		    location = x[1];
		}
	    });
	    counter++
	});
    }
});