/*
 Javascript for FirstEight
*/
var auth_token='';
var fe_sizes = [200,115,210,125];
var show_clip_count = 12;

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

Object.extend(Event, {
  _domReady : function() {
    if (arguments.callee.done) return;
    arguments.callee.done = true;

    if (this._timer)  clearInterval(this._timer);

    this._readyCallbacks.each(function(f){ if (typeof f == 'function') f(); });
    this._readyCallbacks = 'done';
},
  onDOMReady : function(f) {
    if (Event._readyCallbacks == 'done' &&  typeof f == 'function'){
    	f();
    	return;
		}

    if (!this._readyCallbacks) {
      var domReady = this._domReady.bind(this);

      if (document.addEventListener)
        document.addEventListener("DOMContentLoaded", domReady, false);

        /*@cc_on @*/
        /*@if (@_win32)
        		var dummy = location.protocol == "https:" ?  "https://javascript:void(0)" : "javascript:void(0)";
            document.write("<script id=__ie_onload defer src='" + dummy + "'><\/script>");
            document.getElementById("__ie_onload").onreadystatechange = function() {
                if (this.readyState == "complete") domReady();
            };
        /*@end @*/

        if (/WebKit/i.test(navigator.userAgent)) {
          this._timer = setInterval(function() {
            if (/loaded|complete/.test(document.readyState)) domReady();
          }, 10);
        }

        Event.observe(window, 'load', domReady);
        Event._readyCallbacks =  [];
    }
    Event._readyCallbacks.push(f);
  }
});

/*
	Editor/Clip Navigation
*/
/* HL Clips */
cn_hl=function(e,t){
	if(t == 1){
		//mouseover
		var selected = $('main').select('div.clip_nav a.selected');
		selected.invoke('removeClassName','selected');
		selected.invoke('addClassName','was_selected');
		//Check settings on Cats
		var cats = $('editor_nav').select('ul.clipstyle a.selected');
		if(cats.length>0){
			cats.pluck('rel').each(function(c){
				$('main').select('div.clip_nav a.'+e+'.cat_'+c).invoke('addClassName','hover');
			});
		}else{
			$('main').select('div.clip_nav a.'+e).invoke('addClassName','hover');
			try{
				var id=e.substr(7);
				Object.keys(fe_clips.e[id]).each(function(a){
					$('cat_'+a).addClassName('hover');
				});
			}catch(e){}
		}
	}else if(t == 2){
		//mouseout
		var selected = $('main').select('div.clip_nav a.was_selected');
		selected.invoke('removeClassName','was_selected');
		selected.invoke('addClassName','selected');
		$('main').select('div.clip_nav a.'+e).invoke('removeClassName','hover');
		try{
			var id=e.substr(7);
			Object.keys(fe_clips.e[id]).each(function(a){
				$('cat_'+a).removeClassName('hover');
			});
		}catch(e){}
	}else{
		$('main').select('div.clip_nav a').invoke('removeClassName','selected');
		$('main').select('div.clip_nav a').invoke('removeClassName','was_selected');
		$('main').select('div.clip_nav a.'+e).invoke('addClassName','selected');
	}
};

/* HL Editors */
cn_ehl=function(c,t){
	if(t == 1){
		//mouseover
		//Clear selected
		var selected = $('main').select('div.clip_nav a.selected');
		selected.invoke('removeClassName','selected');
		selected.invoke('addClassName','was_selected');
		$('editor_nav').select('div.editors a.'+c).invoke('addClassName','hover');
		$('main').select('div.clip_nav a.cat_'+c).invoke('addClassName','hover');
	}else if(t == 2){
		//mouseout
		var selected = $('main').select('div.clip_nav a.was_selected');
		selected.invoke('removeClassName','was_selected');
		selected.invoke('addClassName','selected');
		$('editor_nav').select('div.editors a.'+c).invoke('removeClassName','hover');
		$('main').select('div.clip_nav a.cat_'+c).invoke('removeClassName','hover');
	}
};

/* Add Event Listeners unobstrusive */
fe_init = function(){
	var claim_template = new Template('url(/images/image_thumb.php?width=470&height=150&size=dyn&text=#{text}&typ=conduit1)');
	var reel_template = new Template('<a id="clip_#{clip}" class="reel editor_#{editor} cat_#{cat}" rel="clip_#{clip}" href="reel.html?reel_id=#{clip}" title="#{title}" style="display:none;"><span class="label">#{title}</span><span class="active"><img src="#{act_img}" alt=""/></span><span class="normal"><img src="#{normal_img}" alt="" /></span><span class="alt">#{title}</span></a>');
	
	var cat_template = new Template('<span style="background-image: url(/images/image_thumb.php?height=9&size=dyn&text=#{text}&typ=pixel2)" class="normal"></span><span style="background-image: url(/images/image_thumb.php?height=9&size=dyn&text=#{text}&typ=pixel4)" class="hover"></span><span style="background-image: url(/images/image_thumb.php?height=9&size=dyn&text=#{text}&typ=pixel1)" class="deactivate"></span><span style="background-image: url(/images/image_thumb.php?height=9&size=dyn&text=#{text}&typ=pixel3)" class="active"></span><span class="alt">#{label}</span>');
	
	//EDITOR NAV
	$('editor_nav').select('div.editors a').each(function(el){
		el.onmouseover = function(e){
			var ele = Event.element(e).up('a');
			if (ele && ele.hasClassName('deactivate')){	return;	}
			cn_hl(el.rel,1);
		}.bindAsEventListener();
		el.onmouseout = function(e){
			var ele = Event.element(e).up('a');
			if (ele && ele.hasClassName('deactivate')){	return;	}
			cn_hl(el.rel,2);
		}.bindAsEventListener();
		el.onclick = function(e){
			Event.stop(e);
			var el = Event.element(e).up('a');
			if (el.hasClassName('deactivate')){
				return;
			}
			
			//Change H1 Claim
			var lname=el.down('span.alt').innerHTML ;
			var fname=lname.substring(0,lname.indexOf(' '));
			lname = lname.substring(fname.length+1);
			if (!static_heading){
				$('claim').setStyle({
					backgroundImage: claim_template.evaluate({text: 'Hello,|my+name+is|'+fname+'+'+lname})
				});
			};
			
					
			//Check selected cats and editors
			var cats = $('editor_nav').select('ul.clipstyle a.selected').pluck('rel');
			//Check on Editor Action
			if (false && el.hasClassName('selected')){
				//De-Select Editor
				$('editor_nav').select('div.editors a.selected').invoke('removeClassName','selected');
				var editor = false;
				cats = ['none'];
				$('editor_nav').select('ul.clipstyle a').invoke('removeClassName','selected');
				//Activate all deactivated Cats again
				$('editor_nav').select('ul.clipstyle a').invoke('removeClassName','deactivate');
				
			}else{
				//Select Editor
				$('editor_nav').select('div.editors a.selected').invoke('removeClassName','selected');
				el.addClassName('selected');
				var editor = el;
				
				//Select Categories if not selected yet
				try{
					//$('editor_nav').select('ul.clipstyle a').invoke('addClassName','deactivate');
					$('editor_nav').select('ul.clipstyle a.selected').invoke('addClassName','was_selected');
					$('editor_nav').select('ul.clipstyle a.selected').invoke('removeClassName','selected');
					var new_cats = [];//RESET Cats
					var id=el.rel.substr(7);
					Object.keys(fe_clips.e[id]).each(function(a){
						//$('cat_'+a).removeClassName('deactivate');
						if (cats.length==0 || $('cat_'+a).hasClassName('was_selected')){
							$('cat_'+a).addClassName('selected');
							new_cats.push(a);
						}
					});
					cats = new_cats;
					$('editor_nav').select('ul.clipstyle a').invoke('removeClassName','was_selected');
				}catch(e){}
			}

			//Prepare Filter
			var editor_filter = (editor) ? '.'+editor.rel : '';
			var editor_id = (editor) ? editor.readAttribute('rel').substr(7) : 0;

			//Arrange and select the clips
			var els = [];//els will be available suitable clips for editor
			var cat_ids = [0,1,2];//Cats we will be looking in
			if (false && cats.length>0) {
				cat_ids = [];//Reset and fill with current selection
				cats.each(function(c){
					cat_ids.push(fe_clips.c[c]);
					els = els.concat($('main').select('div.clip_nav a.cat_'+c+editor_filter));
				});
			}else{
				els = $('main').select('div.clip_nav a'+editor_filter);
			}
			var loaded_ids = els.pluck('rel').invoke('replace',/[^\d]/g,'');
			
			if (loaded_ids.length < show_clip_count && cat_ids.length>0){
				//Load more clips from map if available
				var more_clips = [];
				cat_ids.each(function(cat_id){
					if(fe_clips.e[editor_id][cat_id]){
						more_clips = more_clips.concat(fe_clips.e[editor_id][cat_id]);
					}
				});
				//Remove already loaded clips from array
				loaded_ids.each(function(id){
					more_clips = more_clips.without(id);
				});
				//Now initialize the HTML for these clips
				var pc = $('main').down('div.clip_nav');
				more_clips.sort(function() {return 0.5 - Math.random();});				
				more_clips.each(function(clip_id){
					var data = fe_clips.r[clip_id];
					data = { clip: clip_id, cat: Object.keys(fe_clips.c)[data[0]], editor: data[1], title: data[2], act_img: data[3].match(/\//) ? data[3] : '/images/cache/'+data[3], normal_img: data[4].match(/\//) ? data[4] : '/images/cache/'+data[4]};
					pc.insert({bottom: reel_template.evaluate(data)});
					els.push($('clip_'+clip_id));
				});
			}
			var dls = $('main').select('div.clip_nav a');//all clips loaded (visible and hidden)
			dls.reverse().invoke('absolutize');//Needs to be done in reverse order, otherwise fails
			
			
			els.invoke('addClassName','selected');
			//els.sort(function() {return 0.5 - Math.random();});
			var px=0,py=5,visible_clips=0;
			//Clean "all" clips from good ones
			els.each(function(el){
				dls = dls.without(el);
			});
			
			//Clear running Effect queues
			Effect.Queues.get('clipnav').invoke('cancel');
			
			//Hide the unwanted  visible clips
			dls.invoke('removeClassName','selected');
			dls.invoke('removeClassName','was_selected');
			
			//dls.sort(function() {return 0.5 - Math.random();});
			dls.each(function(el){
				if (el.visible()){
					el.addClassName('hidden');
					new Effect.SwitchOff(el,{duration: 0.1, queue: { position: 'end', scope: 'clipnav', limit: 24}});//Limit is 24 (Hide 12, Show 12)
					//new Effect.Fade(el,{duration: 0.2, queue: 'end'});
					
//					new Effect.Morph(el,{style:'top:'+py+'px;left:'+px+'px;',duration:0.8});
//					px += fe_sizes[2];
//					if (px >= 840){
//						px=0;
//						py+=fe_sizes[3];
//					}
				}
			});
			//console.log(els);
			//Arrange existing items
			var morph = [];var appear = [];
			els.each(function(el){
				if ((el.hasClassName('hidden')||!el.visible()) && visible_clips < show_clip_count){
					el.setStyle({width:fe_sizes[0]+'px',height:fe_sizes[1]+'px',top: py+'px', left: px+'px'});
					//el.show();
					appear.push(el);
					el.removeClassName('hidden');
					visible_clips++;
				}else if (el.visible() && visible_clips < show_clip_count){
					el.show();//Make sure it is there;
					morph.push(new Effect.Morph(el,{sync: true, style:'top:'+py+'px;left:'+px+'px;',duration:0.3}));
					visible_clips++;
				}else{
					//new Effect.SwitchOff(el,{duration:0.1, queue: { position: 'end', scope: 'clipnav', limit: 24}}); 
					new Effect.Fade(el,{duration:0.2, queue: { position: 'end', scope: 'clipnav', limit: 24}}); 
				}
				px += fe_sizes[2];
				if (px >= 840){
					px=0;
					py+=fe_sizes[3];
				}
			});

			if(morph.length>0){
				new Effect.Parallel(morph,{queue: { position: 'end', scope: 'clipnav'}});
				//new Effect.Parallel(morph,{queue: { position: 'end', scope: 'clipnav', limit: 24}});
			}
			if(appear.length>0){
				appear.each(function(el){
					new Effect.Appear(el,{duration:0.1, queue: { position: 'end', scope: 'clipnav'}});
				});
			}
						
			//Set Vita and Play All Links
			if(els.length > 0){
				cat_ids.push(3);
				if(cat_ids.length>0){
					//$('cat_commercial').up('li').hide();
					//$('cat_long').up('li').hide();
					//$('cat_music').up('li').hide();					
					$('cat_commercial').addClassName('deactivate');
					$('cat_long').addClassName('deactivate');
					$('cat_music').addClassName('deactivate');
					$('cat_myreel').addClassName('deactivate');
					cat_ids.each(function(c){
						if(fe_clips.e[editor_id][c] && $('cat_'+Object.keys(fe_clips.c)[c])){
							$('cat_'+Object.keys(fe_clips.c)[c]).removeClassName('deactivate');
						}
					});
				}
				if (!$('editor_nav').down('div.editor_options').visible()){
					$('editor_nav').down('div.editor_options')
					new Effect.Appear($('editor_nav').down('div.editor_options'));
					new Effect.Appear($('editor_nav').down('.vita'));
					new Effect.Appear($('editor_nav').down('ul.clipstyle'));
				}
				if (auth_token!=''){
					$('editor_nav').down('div.editor_options div.play a').href = '/reel::'+auth_token+'.html?reels='+els.pluck('rel').invoke('substr',5).join(',');
					$('editor_nav').down('.vita a').href = '/vita::'+auth_token+'.html?cn_editor='+el.rel.substr(7);
				}else{
					//$('editor_nav').down('div.editor_options div.play a').href = 'reel.html?reels='+els.pluck('rel').invoke('substr',5).join(',');
					//$('editor_nav').down('div.editor_options div.play a').href = 'reel.html?editor='+el.rel.substr(7);
					$('editor_nav').down('.vita a').href = 'vita.html?cn_editor='+el.rel.substr(7);
					$('cat_commercial').href = 'reel.html?cn_style=commercial&editor='+el.rel.substr(7);
					$('cat_music').href = 'reel.html?cn_style=music&editor='+el.rel.substr(7);
					$('cat_long').href = 'reel.html?cn_style=long&editor='+el.rel.substr(7);
					$('cat_myreel').href = 'reel.html?editor='+el.rel.substr(7);
					
					$('cat_commercial').update(cat_template.evaluate({text: escape(fe_clips.ec[el.rel.substr(7)][0]), label: fe_clips.ec[el.rel.substr(7)][0]}));
					$('cat_long').update(cat_template.evaluate({text: escape(fe_clips.ec[el.rel.substr(7)][1]), label: fe_clips.ec[el.rel.substr(7)][0]}));
					$('cat_music').update(cat_template.evaluate({text: escape(fe_clips.ec[el.rel.substr(7)][2]), label: fe_clips.ec[el.rel.substr(7)][0]}));

				}
			}else if ($('editor_nav').down('div.editor_options').visible()){
				new Effect.DropOut($('editor_nav').down('div.editor_options'));
				new Effect.DropOut($('editor_nav').down('.vita'));
				new Effect.DropOut($('editor_nav').down('ul.clipstyle'));
			}
					
			return;
			
			}.bindAsEventListener();
	});
	
	//Clips Click+Mouseover
	if ($('main').select('div.clip_nav a')){
		$('main').select('div.clip_nav a').each(function(el){
			el.onclick = function(e){
				
				new Effect.Appear($('white'),{duration:0.5});
				Event.stop(e);
				(function(){window.location = Event.element(e).up('a').href}).delay(0.5);
				return true;
				}.bindAsEventListener();
			
			el.onmouseover = function(e){	
				try{
				var clip_id = Event.element(e).up('a').rel.substr(5);
				//$('cat_'+fe_clips.r[clip_id][0]).addClassName('hover');
				$('editor_'+fe_clips.r[clip_id][1]).addClassName('hover');
				}catch(e){}
				Event.stop(e);
				return true;
				}.bindAsEventListener();
				
			el.onmouseout = function(e){	
				try{
				var clip_id = Event.element(e).up('a').rel.substr(5);
				//$('cat_'+fe_clips.r[clip_id][0]).removeClassName('hover');
				$('editor_'+fe_clips.r[clip_id][1]).removeClassName('hover');
				}catch(e){}
				Event.stop(e);
				return true;
				}.bindAsEventListener();				
		});
	};
	//Play All
	if (false && $('editor_nav').select('div.editor_options div.play a')){
		$('editor_nav').select('div.editor_options div.play a').each(function(el){
			el.onclick = function(e){
				
				new Effect.Appear($('white'),{duration:0.5});
				Event.stop(e);
				(function(){window.location = Event.element(e).up('a').href}).delay(0.5);
				return true;
				}.bindAsEventListener();
		});
	};
	//Location Switch
	if (false && $('location_nav').select('ul.locations a')){
		$('location_nav').select('ul.locations a').each(function(el){
			el.onclick = function(e){
				var a = Event.element(e).up('a');
				Event.stop(e);
				var loc_id = a.up('li').className.replace(/[^\d]/g,'');
				for(i=1;i<=2;i++){
					if(i!=loc_id){
						$('editor_nav').select('div.editors div.loc_'+i).invoke('hide');
						//$('editor_nav').select('div.editors div.loc_'+i).each(function(el){
							//new Effect.DropOut(el,{duration:0.3});
						//});
					}
				}
				$('editor_nav').select('div.editors div.loc_'+loc_id).each(function(el){
					new Effect.Appear(el,{duration:0.5});
				});
				$('location_nav').select('ul.locations a').invoke('removeClassName','selected');
				a.addClassName('selected');
				//new Effect.Appear($('white'),{duration:0.5});
				
				return true;
				}.bindAsEventListener();				
		});
	};
};

Event.onDOMReady(function(){
	if ($('pic_nav') && $('pic_nav').down('div.reel_nav_scroll').getWidth() > $('pic_nav').down('div.reel_nav').getWidth()){
		
		var trigger = function(e){
			var w = 847;
			var s = $('pic_nav').down('div.reel_nav_scroll');
			var pos = s.positionedOffset();
			var sw = s.getWidth();
			var c = e.clientX;
			var max_move = sw-w;
			var new_left = false;
			if(c>((w/2)+200)){
				new_left = pos.left - 121;	
			}else if(c<((w/2)-200)){
				new_left = pos.left + 121;
			}
			if(new_left !== false){
				if(((new_left+10) % 121)){
					new_left = new_left - 10;
				}
			}
			
			if(new_left === false){
				//do nothing
			}
			else if(new_left <= -20 && new_left.abs() <= max_move){
				$('pic_nav').down('div.reel_nav').addClassName('scroll');
				new Effect.Morph(s, {queue: {position: 'end', limit: 1, scope: 'picnav'}, style:'left:'+new_left+'px;',duration:0.3, transition: Effect.Transitions.linear});
			}else if (new_left > -20){
				new Effect.Morph(s, {queue: {position: 'end', limit: 1, scope: 'picnav'}, style:'left:'+0+'px;',duration:0.3, transition: Effect.Transitions.linear});
			}else if (new_left.abs() > max_move){
				$('pic_nav').down('div.reel_nav').removeClassName('scroll');
				new Effect.Morph(s, {queue: {position: 'end', limit: 1, scope: 'picnav'}, style:'left:-'+max_move+'px;',duration:0.3, transition: Effect.Transitions.linear});
			}
		}.bindAsEventListener();
		$('pic_nav').down('div.reel_nav').onmousemove = trigger;
		
		var selected_pos = $('pic_nav').down('a.selected').positionedOffset();
		if (selected_pos.left > 847-121){
			$('pic_nav').down('div.reel_nav_scroll').setStyle({left: (847-121-selected_pos.left)+'px'});
		}
	};
	if($('pic_nav')){
		if(document.viewport.getHeight()<800){
			$('pic_nav').scrollTo();
		}
	}
	var checks = ['cat_commercial','cat_long','cat_music','cat_myreel'];
	checks.each(function(i){
		if($(i)){
		$(i).onclick = function(e){
			if(this.hasClassName('deactivate')){
				Event.stop(e);
				return false;
			}
		}.bindAsEventListener($(i));
		}
	});
});