var ImageSwitch = new Class({
		
			initialize: function(arr,id){
			
			        this.countimages = arr.length;
					this.counter = 0;
					this.id = id;
			        this.next = new Element('a',{
					
						'href': 'javascript:void(0)',
						'html': '<img src="http://www.ewetel.de/images/produktabb/ewetel_pfeil_re.gif">',
						'styles': {
								'margin-left':'20px',
								'float':'right',
								'font-size':'20px',
								'font-weight':'bold'
						},
						'events':{
						
							'click':function(){this.next.blur();this.increase();this.imagearray.each(function(obj,nr){obj.setStyle('display','none');});this.imagearray[this.counter].setStyle('display','block');}.bind(this)
							
							
						}
					});
					
					this.back = new Element('a',{
					
						'href': 'javascript:void(0)',
						'html': '<img src="http://www.ewetel.de/images/produktabb/ewetel_pfeil_li.gif">',
						'styles': {
						
								'float':'left',
								'font-size':'20px',
								'font-weight':'bold'
								
						},
						'events':{
						
							'click':function(){this.back.blur();this.decrease();this.imagearray.each(function(obj,nr){obj.setStyle('display','none');});this.imagearray[this.counter].setStyle('display','block');}.bind(this)
							
							
						}
					});
			
			        var erroroccured = false;
					this.imagearray = new Asset.images(arr,{
					
							onComplete: function(){
							
							    if(!erroroccured)
								{
								$($(this.id).parentNode).setStyle('width',this.imagearray[0].width+160+'px');
								this.back.setStyle('margin-top','-'+(this.imagearray[0].height/2)+'px');
								this.next.setStyle('margin-top','-'+(this.imagearray[0].height/2)+'px');
								$(this.id).set('html','');
								this.imagearray.each(function(obj,nr){
								obj.setStyle('margin','20px 0 0 76px');
								        if(nr > 0)
										obj.setStyle('display','none');
										else
										obj.setStyle('display','block');
										obj.inject($(this.id));
								}.bind(this));
								
								if(this.countimages > 1){
								this.next.inject($(this.id),'bottom');
								this.back.inject($(this.id),'bottom');
								}
								
								}

							}.bind(this),
							onError: function(){
							
							    erroroccured = true;
								
							}
					
					});
					
					
					
 			},
			
			increase: function(){this.counter++; if(this.counter == this.countimages) this.counter = 0;},
			decrease: function(){this.counter--; if(this.counter == -1) this.counter = this.countimages -1 ;}

				
		});
		



/*

        Bild und Text Modal
        Autor: Carsten Meyer
        HMMH AG 2010

        Usage: new AjaxModal('demo.jpg','<b>Impact</b>').show();

*/

var AjaxModal = new Class({

           initialize: function(img,text){
           
		            this.images = img;
                    this.img = img[0];
                    this.text = text;
                    
                    this.close = new Element('a',{
                    
                        html: 'Fenster schlie&szlig;en',
                        href: 'javascript:void(0)',
                        styles:{
                        
                              'position': 'absolute',
                              'right': '10px',
                              'top': '10px'
                              
                        }
                    
                    });
                    this.close.set('class','modalclose');
                    this.headline = new Element('div',{
                    
                        html: this.text,
                        styles:{
                        
                          'position': 'absolute',
                          'left': '20px',
                          'top': '30px',
						  'text-align':'left'
						 
                        
                        }
                    });
                    
                    this.center = new Element('div',{
                    
                            id: 'modalForeground',
                            styles:{
                            
                                 'position':'absolute',
                                 'z-index':1010,
                                 'width': '100%',
								 'height': $(document.body).getSize().y+'px',
                                 'top':    $(document.body).getScroll().y + 20 + 'px',
								 'left': '0px'
                            }
                    
                    });
                    this.div = new Element('div',{
                    
                    
                        
                        styles: {
                        
                          
                          'background-color':'#ffffff',
                          'margin': '0px auto',
                          'opacity':0

                        
                        }
                    
                    });


                    
                    
           
           },
           show: function(){
                   

                            
                    var myImages = new Asset.images([this.img], {
                      onComplete: function(){
                      
                          
                          w = myImages[0].width;
                          h = myImages[0].height;
                          
						  this.headline.setStyles({
						  
						  		'width': w + 160 + 'px'
								
						  
						  });
						  
                          this.div.setStyles({
                          
                              'height': h + 120 + 'px',
                              'width': w + 200 + 'px',
                              'position': 'relative'

                          
                          });
                          myImages[0].setStyles({
                          
                              'position':'absolute',
                              'left': '100px',
                              'top': '100px'
                          });
                          
                          this.headline.inject(this.div);
                          this.close.inject(this.div);
						  
  

						  d1 = new Element('div',{'html':'','styles':{'position':'absolute','top':'60px','left':'20px','width':'400px'}});
						  d2 = new Element('div',{'html':'Loading ...'}).inject(d1);
						  d2.set('id','imgrotate');
						  
						  d1.inject(this.div);
						  new ImageSwitch(this.images,'imgrotate');
				 
						 
                          this.div.inject(this.center);
                          this.center.inject($(document.body));
                          
                          this.div.fade('in');
                          // this.center.pin();

                          
                          this.close.addEvent('click',function(){
                          
                                 $('modalOverlay').fade('out');
								 
								
                                 this.div.get('tween', {property: 'opacity', duration: 'long',onComplete:function(){
                                 
                                      this.center.dispose();                 
                                      $('modalOverlay').setStyle('display','none');
                                 
                                 }.bind(this)}).start(1,0);
                                
                          
                          }.bind(this));
                          
                          this.modalShow({
                    
                              modalStyle:{
                                'background-color':'#000000',
                                'opacity':0.3,
                                'position':'absolute',
                                'z-index':1000
                              }
                            });
                          
						  
                       
                          
                          
                          $('modalOverlay').addEvent('click',function(){
                          
                                this.center.dispose();
                          
                          }.bind(this));
                          
                      
                      
                      }.bind(this)
                     });
           
           }


}).implement(new Modalizer);