/**************************************************
	Fighter Component
	File: /components/fighters/
***************************************************/
Fighter = new Class({
	Implements: Options,
	
	options: {
		'selected':false,
		'clear':$empty,
		'width':43,
		'height':106,
		'size':'',
		'name':'',
		'state':'',
		'city':'',
		'why':'',
		'popup':true
	},
	
	initialize: function(image,image_selected,options){
		this.setOptions(options);
		
		//this.image = image;
		/* added conditional to make sure that "no image" does not display on fighter popup */
		if(image != '') this.image = image;
		else this.image = 'male-fighter-1.png';
		
		this.delay = 0;
		if(this.options.size == 'small'){this.options.size = 'small-';}
		this.fighter = new Element('div',{'class':'fighter'});
		this.fighter.setStyles({'position':'relative','float':'left','width':this.options.width,'height':this.options.height,'background-image':'url(/assets/fighters/'+this.options.size+image+')','cursor':'pointer','margin':0,'margin-top':10,'margin-bottom':10});
		this.fighter_selected = new Element('img',{'src':'/assets/fighters/'+this.options.size+image_selected,'alt':'Fighter'});
		this.fighter_selected.setStyles({'opacity':0});
		this.fighter_selected.inject(this.fighter);
		this.fighter_fx = new Fx.Morph(this.fighter_selected,{'duration':600,'transition':Fx.Transitions.Quint.easeOut});
		this.fighter_fx_linear_show = new Fx.Morph(this.fighter,{'duration':1000,'transition':Fx.Transitions.linear.easeOut});
		this.fighter_fx_linear_hide = new Fx.Morph(this.fighter,{'duration':2000,'transition':Fx.Transitions.linear.easeOut,'onComplete':function(){
			this.fighter.inject(this.fighter.getParent());
			this.show();
		}.bind(this)});
		
		this.fighter.addEvent('mouseenter',function(){
			this.fighter_fx.pause();
			this.fighter_fx.start({'opacity':1});
			this.delay = this.showPopup.delay(700,this);
		}.bind(this))
		
		this.fighter.addEvent('mouseleave',function(){
			if(this.options.selected == false){
				this.fighter_fx.pause();
				this.fighter_fx.start({'opacity':0});
				$clear(this.delay);
				this.hidePopup();
			}
		}.bind(this))
		
		this.fighter.addEvent('click',function(){
			if(this.options.selected){
				this.deselect();
			} else {
				this.select();
			}
		}.bind(this));
		
		this.popup = new Element('div',{'class':'fighter-popup'});
		this.popup.setStyles({'background-image':'url(/templates/default/images/bg-fighter-popup.png)','width':269,'height':182,'position':'absolute','left':-125,'top':-185,'opacity':0});
		if(this.options.popup){this.popup.inject(this.fighter);}
		this.popup_fx = new Fx.Morph(this.popup,{'duration':200,'transition':Fx.Transitions.linear.easeOut});
		this.popup_content = new Element('div',{'class':'popup-content'});
		this.popup_content.setStyles({'padding':20,'border':'0px solid white'});
		this.popup_content.inject(this.popup);
		
		this.popup_img = new Element('img',{'src':'/assets/fighters/'+this.image,'alt':'Avatar'});
		this.popup_img.setStyles({'float':'left','margin-right':5});
		this.popup_img.inject(this.popup_content);
		
		this.popup_title = new Element('h1',{'class':'popup-title'});
		this.popup_title.set('html',this.options.name);
		this.popup_title.setStyles({'color':'#ffde01','font-size':18,'letter-spacing':-1});
		this.popup_title.inject(this.popup_content);
		
		/*
		this.paragraph = new Element('p',{'class':'popup-text'});
		if(this.options.why == ''){
			//this.paragraph.set('html','<strong>State:</strong> '+this.options.state+'<br/><strong>City:</strong> '+this.options.city);
			this.paragraph.set('html','<strong>City:</strong> '+this.options.city+'<br />');
		}else{
			//this.paragraph.set('html','<strong>State:</strong> '+this.options.state+'<br/><strong>City:</strong> '+this.options.city+'<br/><strong>I\'m a fighter because:</strong><br/>'+this.options.why);
			this.paragraph.set('html','<strong>City:</strong> '+this.options.city+'<br/><strong>I\'m a fighter because:</strong><br/>'+this.options.why);
		}
		this.paragraph.inject(this.popup_content);
		*/
		
		/* broke up all the values so if not value is present it will not display */
		var sState = '';
		var sCity = '';
		var sWhy = '';
		
		this.paragraph = new Element('p',{'class':'popup-text'});
		
		if(this.options.state != ''){ sState = '<strong>State:</strong> ' + this.options.state + '<br />'; }
		if(this.options.city != ''){ sCity = '<strong>City:</strong> ' + this.options.city + '<br />'; }
		if(this.options.why != ''){ sWhy = '<strong>I\'m a fighter because:</strong><br />' + this.options.why; }
		
		this.paragraph.set('html',sState + sCity + sWhy);
		this.paragraph.inject(this.popup_content);
	},
	
	showPopup: function(){
		this.popup_fx.pause();
		this.popup_fx.start({'opacity':1});
	},
	
	hidePopup: function(){
		this.popup_fx.pause();
		this.popup_fx.start({'opacity':0});
	},
	
	hide: function(){
		this.fighter_fx_linear_show.pause();
		this.fighter_fx_linear_hide.pause();
		this.fighter_fx_linear_hide.start({'width':0});
	},
	
	show: function(){
		this.fighter_fx_linear_show.pause();
		this.fighter_fx_linear_hide.pause();
		this.fighter_fx_linear_show.start({'width':this.options.width});
	},
	
	deselect: function(){
		this.fighter_fx.pause();
		this.fighter_fx.start({'opacity':0});
		this.options.selected = false;
	},
	
	select: function(){
		this.options.clear(this.image);
		this.fighter_fx.pause();
		this.fighter_fx.start({'opacity':1});
		this.options.selected = true;
	},
	
	inject: function(el){
		this.fighter.inject(el);
	}
})

/**************************************************
	Fighters Component
	File: /components/fighters/
***************************************************/

Fighters = new Class({
	Implements: Options,
	
	options: {
		'content_part_id': 0,
		'user_gender':'male',
		'user_avatar':''
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.males = [];
		this.females = [];
		this.images = [];
		this.fighter_container = new Element('div',{'class':'fighter-container'});
		this.fighter_container.setStyles({'position':'relative','margin-bottom':15,'background-image':'url(/templates/default/images/bg-fighter-selector.png)','width':608,'height':131});
		
		this.fighter_value = new Element('input',{'type':'hidden','value':'','name':'user_avatar','id':'user_avatar'});
		this.fighter_value.inject(this.fighter_container);
		
		//gender
		this.gender_container = new Element('div',{'class':'gender-container'});
		this.gender_container.setStyles({'float':'left','width':'150px'});
		this.gender_container.inject(this.fighter_container);
		this.gender_label = new Element('div',{'class':'gender-label'});
		this.gender_label.setStyles({'font-family':'arial','color':'#f3d404','padding':15});
		this.gender_label.set('html','CHOOSE YOUR FIGHTER PROFILE');
		this.gender_label.inject(this.gender_container);

		this.male_check = new Element('input',{'id':'user_gender','type':'radio','name':'user_gender','value':'male'});
		this.male_check.setStyles({'float':'left','width':15,'margin-top':8,'margin-left':30,'border':'0px'});
		this.male_check.inject(this.gender_container);
		this.male_label = new Element('label',{'class':'male-label'})
		this.male_label.setStyles({'float':'left','width':50,'text-align':'left'})
		this.male_label.set('html','Male');
		this.male_label.inject(this.gender_container);
		this.br = new Element('br',{'class':'clear'});
		this.br.inject(this.gender_container);
		this.female_check = new Element('input',{'id':'user_gender','type':'radio','name':'user_gender','value':'female'});
		this.female_check.setStyles({'float':'left','width':15,'margin-top':8,'margin-left':30,'border':'0px'});
		this.female_check.inject(this.gender_container);
		this.female_label = new Element('label',{'class':'female-label'});
		this.female_label.setStyles({'float':'left','width':50,'text-align':'left'})
		this.female_label.set('html','Female');
		this.female_label.inject(this.gender_container);
		
		if(this.options.user_gender == 'male'){
			this.male_check.checked = true;
			this.male_check.defaultChecked = true;
		} else if(this.options.user_gender == 'female'){
			this.female_check.checked = true;
			this.female_check.defaultChecked = true;
		}
		
		this.male_check.addEvent('click',function(){
			this.options.user_gender = 'male';
			this.male_fx.pause();
			this.female_fx.pause();
			this.male_fx.start({'opacity':1});
			this.female_fx.start({'opacity':0});
		}.bind(this))
		this.female_check.addEvent('click',function(){
			this.options.user_gender = 'female';
			this.male_fx.pause();
			this.female_fx.pause();
			this.male_fx.start({'opacity':0});
			this.female_fx.start({'opacity':1});
		}.bind(this))
		
		this.mfighters = new Element('div',{'class':'fighters'});
		this.ffighters = new Element('div',{'class':'fighters'});
		this.mfighters.inject(this.fighter_container);
		if(this.options.user_gender == 'female'){this.mfighters.setStyles({'opacity':0});}
		this.ffighters.inject(this.fighter_container);
		if(this.options.user_gender == 'male'){this.ffighters.setStyles({'opacity':0});}
		this.mfighters.setStyles({'position':'absolute','left':150});
		this.ffighters.setStyles({'position':'absolute','left':150});
		
		this.male_fx = new Fx.Morph(this.mfighters,{'duration':600,'transition':Fx.Transitions.Quint.easeOut});
		this.female_fx = new Fx.Morph(this.ffighters,{'duration':600,'transition':Fx.Transitions.Quint.easeOut});
		
		
		
		this.request = new Request({'url':'/index.cfm?action=pages.cp&component=fighters&do=getFighters&content_part_id='+this.options.content_part_id+'&fusebox.password=thinkbig&fusebox.load=true&fusebox.%20parse=true&fusebox.execute=true','onComplete':function(response){
			
			this.response = JSON.decode(response);
			this.males = this.response.fighters.male;
			this.females = this.response.fighters.female;
			for(var j=0;j<this.males.length;++j){
				this.images[this.images.length] = '/assets/fighters/'+this.males[j].image;
				this.images[this.images.length] = '/assets/fighters/selected-'+this.males[j].image;
			}
			for(var i=0;i<this.females.length;++i){
				this.images[this.images.length] = '/assets/fighters/'+this.females[i].image;
				this.images[this.images.length] = '/assets/fighters/selected-'+this.females[i].image;
			}
			
			//load images
			this.assets = new Asset.images(this.images,{'onComplete':function(){
				var m_select_fighter = false;
				for(var i=0;i<this.males.length;++i){
					if(this.options.user_avatar == this.males[i].image){m_select_fighter = i;}
					//alert(this.options.user_avatar + ' - ' + this.males[i].image + ' - ' + select_fighter);
					this.males[i] = new Fighter(this.males[i].image,'selected-'+this.males[i].image,{'clear':this.clear.bind(this),'popup':false});
					this.males[i].inject(this.mfighters);
				}
				
				var f_select_fighter = false;
				for(var i=0;i<this.males.length;++i){
					if(this.options.user_avatar == this.females[i].image){f_select_fighter = i;}
					this.females[i] = new Fighter(this.females[i].image,'selected-'+this.females[i].image,{'clear':this.clear.bind(this),'popup':false});
					this.females[i].inject(this.ffighters);
				}
				if(m_select_fighter != false){this.males[m_select_fighter].select();}
				if(f_select_fighter != false){this.females[f_select_fighter].select();}
			}.bind(this)});
		}.bind(this)}).send();
	},
	
	getFighters: function(){
		
	},
	
	clear: function(image){
		this.fighter_value.setProperty('value',image);
		for(var i=0;i<this.males.length;++i){
			this.males[i].deselect();
		}
		for(var i=0;i<this.females.length;++i){
			this.females[i].deselect();
		}
	},
	
	inject: function(el){
		this.fighter_container.inject(el);
	}
})

/**************************************************
	FighterBar Component
	File: /components/fighters/
***************************************************/

var FighterBar = new Class({
	Implements: Options,
	
	options:{
		'user_fighter':'male-fighter-1.png',
		'is_logged_in':false,
		'state':'open'
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.fighters = [];
		this.cycle_index = 0;
		this.state = this.options.state;
		this.bar_container = new Element('div',{'id':'bar-container','class':'bar-container'});
		if(this.state == 'closed'){this.bar_position_bottom = -60;} else {this.bar_position_bottom = 0;}
		this.bar_container.setStyles({'width':1050,'height':71,'position':'fixed','bottom':this.bar_position_bottom,'left':'50%','margin-left':-525,'border':'0px solid white'});
		
		this.bar = new Element('div',{'class':'figher-bar'});
		this.bar.setStyles({'position':'relative','background-image':'url(/templates/default/images/bg-fighter-bar.png)','width':1050,'height':71});
		this.bar.inject(this.bar_container);
		
		this.track = new Element('div',{'class':'bar-track'});
		this.track.setStyles({'position':'relative','width':1016,'height':65,'border':'0px solid white','margin-left':16,'padding-top':4})
		this.track.inject(this.bar);
		
		this.track_left = new Element('div',{'class':'bar-left'})
		this.track_left.setStyles({'position':'relative','background-image':'url(/templates/default/images/fighter-bar-left.png)','width':52,'height':58,'position':'absolute','left':0,'top':10,'z-index':1000});
		this.track_left.inject(this.track);
		
		this.track_left.addEvent('click',function(){
			window.location = 'index.cfm?action=sec.logout';
		});
		
		this.track_right = new Element('div',{'class':'bar-right'});
		this.track_right.setStyles({'position':'relative','background-image':'url(/templates/default/images/fighter-bar-right.png)','width':52,'height':58,'position':'absolute','right':0,'top':10,'z-index':1000});
		this.track_right.inject(this.track);
		
		this.request = new Request({'url':'/index.cfm?action=pages.cp&component=fighters&do=getFightersBar&content_part_id=155&fusebox.password=thinkbig&fusebox.load=true&fusebox.%20parse=true&fusebox.execute=true','onComplete':function(response){
			this.response = JSON.decode(response);
			for(var i=0;i<this.response.avatars.length;++i){
				
				/* added conditional to make sure that the "no image" does not display on fighter bar */
				if(this.response.avatars[i].avatar == '' || this.response.avatars[i].avatar == null) this.response.avatars[i].avatar = 'male-fighter-1.png';
				
				if(this.response.avatars[i].avatar != '' || this.response.avatars[i].avatar != null){
					this.fighters[this.fighters.length] = new Fighter(this.response.avatars[i].avatar,'selected-'+this.response.avatars[i].avatar,{'width':21,'height':52,'size':'small','name':this.response.avatars[i].name,'state':this.response.avatars[i].state,'city':this.response.avatars[i].city,'why':this.response.avatars[i].why});
					this.fighters[this.fighters.length-1].inject(this.track);
				}
			}
			
		}.bind(this)}).send();
		this.periodical = this.cycle.periodical(1500,this);
		
		this.track.addEvent('mouseleave',function(){
			this.periodical = this.cycle.periodical(1500,this);
		}.bind(this))
		
		this.track.addEvent('mouseenter',function(){
			$clear(this.periodical);
		}.bind(this))
		if(this.state == 'open'){this.fighter_position_top = -30;} else {this.fighter_position_top = -90;}
		this.user_fighter = new Element('div',{'class':'user-fighter'});
		this.user_fighter.setStyles({'position':'absolute','right':10,'top':this.fighter_position_top,'z-index':1001,'opacity':1,'background-image':'url(/assets/fighters/selected-'+this.options.user_fighter+')','width':43,'height':106});
		this.user_fighter.inject(this.bar);
		
		this.user_fighter_black = new Element('img',{'src':'/assets/fighters/'+this.options.user_fighter});
		this.user_fighter_black.setStyles({'cursor':'pointer'});
		this.user_fighter_black.inject(this.user_fighter);
		
		this.user_fighter_black.addEvent('mouseenter',function(){
			this.user_fighter_black.setProperty('src','/assets/fighters/selected-'+this.options.user_fighter);
		}.bind(this));
		
		this.user_fighter_black.addEvent('mouseleave',function(){
			this.user_fighter_black.setProperty('src','/assets/fighters/'+this.options.user_fighter);
		}.bind(this));
		
		this.user_fighter_black.addEvent('click',function(){
			if(this.options.is_logged_in == true){
				window.location = '/index.cfm?action=pages.account';
			} else {
				window.location = '/Become-A-Fighter/';
			}
		}.bind(this))
		
		this.fighter_fx = new Fx.Morph(this.bar_container,{'duration':600,'transition':Fx.Transitions.Quint.easeOut});
		this.user_fighter_fx = new Fx.Morph(this.user_fighter,{'duration':600,'transition':Fx.Transitions.Quint.easeOut});
		
		this.toggle = new Element('div',{'class':'toggle-fighters'});
		this.toggle.setStyles({'color':'#fff','position':'absolute','right':50,'top':-12,'z-index':1001,'cursor':'pointer'});
		this.toggle.set('html','[+/-]');
		this.toggle.inject(this.bar);
		this.toggle.addEvent('click',function(){
			if(this.state == 'open'){
				this.fighter_fx.start({'bottom':-60});
				this.user_fighter_fx.start({'top':-90});
				this.state = 'closed';
			} else {
				this.fighter_fx.start({'bottom':0});
				this.user_fighter_fx.start({'top':-30});
				this.state = 'open';
			}
			this.toggle_request = new Request({'url':'/index.cfm?action=pages.cp&component=fighters&do=toggleFighterBar&content_part_id=155&fusebox.password=thinkbig&fusebox.load=true&fusebox.%20parse=true&fusebox.execute=true'}).send();
		}.bind(this))
		if(this.options.is_logged_in == true){
			this.signout = new Element('div',{'class':'toggle-fighters'});
			this.signout.setStyles({'color':'#fff','position':'absolute','right':83,'top':-10,'z-index':1001,'cursor':'pointer'});
			this.signout.set('html','<a href="index.cfm?action=sec.logout">Logout</a>');
			this.signout.getFirst().setStyles({'color':'#fff'});
			this.signout.inject(this.bar);
		}
		
		
	},
	
	inject: function(el){
		this.bar_container.inject(el);
	},
	
	cycle: function(){
		try {
			this.fighters[this.cycle_index].hide();
		} catch(err) {
		}
		++this.cycle_index;
		if(this.cycle_index >= this.fighters.length){this.cycle_index = this.cycle_index = 0;}
	}
	
	
})