// JavaScript Document

HomeIcon = new Class({
			Implements: Options,
			
			options: {
				'width':200,
				'height':150,
				'image':'assets/user_Images/A_1_thumb.jpg',
				'caption':'test',
				'home_id':0
			},
			
			initialize: function(options){
				//data members
				this.setOptions(options);
				
				//generate HTML
				this.scroll_icon = new Element('div',{'class':'scroll_icon'});
				this.scroll_picture_container = new Element('div',{'class':'scroll_div'});
				this.scroll_picture = new Element('img',{'class':'scroll_img','src':this.options.image});
				this.scroll_icon_text = new Element('div',{'class':'scroll_icon_text'});
				this.scroll_icon_text.set('html',this.options.caption);
				
				//set Styles
				this.scroll_icon.setStyles({'float':'left','margin':'18px','margin-top':'5px'});
				this.scroll_icon_text.setStyles({'text-align':'center'});
				
				//genreate effects
				this.resize = new Fx.Morph(this.scroll_picture,{'duration': 1000, 'transition': Fx.Transitions.Quad.easeOut});
				
				//construct HTML
				this.scroll_picture_container.inject(this.scroll_icon);
				this.scroll_picture.inject(this.scroll_picture_container);
				this.scroll_icon_text.inject(this.scroll_icon);
				
				this.scroll_icon.addEvent('click',function(){
					window.showMatchBox = new Box({'width':730},200,300);
					window.showMatchBox.open('index.cfm?action=matches.displayDetails&home_id='+this.options.home_id,'fade');		
					window.scrollTo(0,75);
				}.bind(this))
				
			},
			
			sizeUp: function(){
				this.resize.pause();
				this.options.height += 30;
				this.options.width += 40;
				this.resize.start({'height':this.options.height,'width':this.options.width});
			},
			
			sizeDown: function(){
				this.resize.pause();
				this.options.height -= 30;
				this.options.width -= 40;
				this.resize.start({'height':this.options.height,'width':this.options.width});
			},
			
			setSize: function(w,h){
				this.scroll_picture.setStyles({'height':h,'width':w});
				this.options.height = h;
				this.options.width = w;
			},
			
			get: function(){
				return this.scroll_icon;
			}
		})
	
        HomeScroller = new Class({
			Implements: Options,
			
			options:{
				'width': 948,
				'height': 230
				
			},
			
			initialize: function(icons,options){
				//data memebers
				this.setOptions(options)
				this.icons = icons;
				this.position = 0;
				this.big_position = 2;
				this.scrollDirection = 'right';
				
				this.scroll_container = new Element('div',{'class':'scroll_container'});
				this.scroll_window = new Element('div',{'class':'scroll_window'});
				this.scroll_strip = new Element('div',{'class':'scroll_strip'});
				this.scroll_left_btn = new Element('div',{'class':'scroll_left_btn'});
				this.scroll_right_btn = new Element('div',{'class':'scroll_right_btn'});
				this.br = new Element('br',{'class':'clear'});
				
				//set styles
				this.scroll_container.setStyles({'height':this.options.height,'width':this.options.width});
				this.scroll_window.setStyles({'height':this.options.height-50,'width':this.options.width,'overflow':'hidden'});
				this.scroll_strip.setStyles({'width':'6000px','height':this.options.height-50});
				this.scroll_left_btn.setStyles({'float':'left','background-image':'url(assets/img/scroll_left.png)','width':55,'height':50});
				this.scroll_right_btn.setStyles({'float':'right','background-image':'url(assets/img/scroll_right.png)','width':55,'height':50});
				
				//create effects
				this.scroll_fx = new Fx.Scroll(this.scroll_window,{'duration': 1000,'offset': {'x':-15,'y': 0}});
				
				//construct HTML
				this.scroll_window.inject(this.scroll_container);
				this.scroll_strip.inject(this.scroll_window);
				this.scroll_left_btn.inject(this.scroll_container);
				this.scroll_right_btn.inject(this.scroll_container);
				this.br.inject(this.scroll_window);

				for(var i=0;i<this.icons.length;++i){
					if(i == 0){this.icons[i].setSize(120,90);this.icons[i].scroll_icon_text.setStyles({'display':'none'});}
					else if(i == 1){this.icons[i].setSize(160,120);this.icons[i].scroll_icon_text.setStyles({'display':'none'});}
					else if(i == 2){this.icons[i].setSize(200,150);this.icons[i].scroll_icon_text.setStyles({'display':'block'});}
					else if(i == 3){this.icons[i].setSize(160,120);this.icons[i].scroll_icon_text.setStyles({'display':'none'});}
					else{this.icons[i].setSize(120,90);this.icons[i].scroll_icon_text.setStyles({'display':'none'});}
					this.icons[i].get().inject(this.scroll_strip);
				}
				
				this.scroll_right_btn.addEvent('click',function(){
					$clear(this.periodical);
					this.scrollRight();
				}.bind(this));
				
				this.scroll_left_btn.addEvent('click',function(){
					$clear(this.periodical);
					this.scrollLeft();
				}.bind(this))
				
				//set autoscroll
				this.periodical = this.autoScroll.periodical(5000,this);
				
			},
			
			get: function(){
				return this.scroll_container;
			},
			
			scrollRight: function(){
				if($defined(this.icons[this.big_position+2+1])){
					this.position += 1;
					
					this.icons[this.big_position].sizeDown();
					this.icons[this.big_position-1].sizeDown.delay(100,this.icons[this.big_position-1]);
					this.icons[this.big_position+1].sizeUp();
					this.icons[this.big_position+2].sizeUp.delay(100,this.icons[this.big_position+2]);
					this.big_position += 1;
					this.scroll_fx.pause();
					this.scroll_fx.toElement(this.icons[this.position].get());
					this.scroll_fx.removeEvents();
					this.scroll_fx.addEvent('onComplete',function(){
						this.icons[this.big_position-1].scroll_icon_text.setStyles({'display':'none'})
						this.icons[this.big_position].scroll_icon_text.setStyles({'display':'block'});
					}.bind(this))
				}
			},
			
			scrollLeft: function(){
				if($defined(this.icons[this.big_position-2-1])){
					this.position -= 1;
					this.icons[this.big_position].sizeDown();
					this.icons[this.big_position-2].sizeUp.delay(100,this.icons[this.big_position-2]);
					this.icons[this.big_position-1].sizeUp();
					this.icons[this.big_position+1].sizeDown.delay(100,this.icons[this.big_position+1]);
					this.big_position -= 1;
					this.scroll_fx.pause();
					this.scroll_fx.toElement(this.icons[this.position].get());
					this.scroll_fx.removeEvents();
					this.scroll_fx.addEvent('onComplete',function(){
						this.icons[this.big_position+1].scroll_icon_text.setStyles({'display':'none'})
						this.icons[this.big_position].scroll_icon_text.setStyles({'display':'block'});
					}.bind(this))
				}
			},
			
			autoScroll: function(){
				if(this.scrollDirection == 'right'){
					if($defined(this.icons[this.big_position+2+1])){
						this.scrollRight();	
					} else {
						this.scrollDirection = 'left';
					}
				} else {
					if($defined(this.icons[this.big_position-2-1])){
						this.scrollLeft();	
					} else {
						this.scrollDirection = 'right';
					}
				}
			}
		})