// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults




var Avatar = Class.create({
  initialize : function( div ,source , options ) {
    // Valid options are size
    // size: xsm, sm, med, lrg
	
    this.options = Object.extend({ size:"xsm" }, options || {});
    
    this.container = div;
	this.avatar_holder = this.container;
	
	if( this.options.linked == true ) { this.buildLinkedContainer(); }

    this.avatar_image = new Element("img");
    this.avatar_image.observe("load", this.imageLoad.bind(this));
    this.avatar_image.observe("error", this.imageError.bind(this));
    this.avatar_image.src = source;
  },

  buildLinkedContainer : function() {
	var href = "/locals/" + this.options.user;
	var anchor = new Element("a", {href:href});
	this.container.insert(anchor);
	this.avatar_holder = anchor;
  },

  // If there is no image at the requested location then load in the default avatar.
  imageError : function( event ) {
    this.avatar_holder.insert( new Element("img", {src:"/images/interface/avatar/" + this.options.size + ".gif"}));
  },

  // If there is a valid avatar image that has been loaded, insert that into our avatar div.
  imageLoad : function( event ) {
    this.avatar_holder.insert( this.avatar_image );
  }
});

var AvatarLoader = Class.create({

  initialize : function(options) {
    // Valid options are size and selector
    // size: xsm, sm, med, lrg
    // selector: any css selector to retrieve all avatar containers with source attribute.
    this.options = Object.extend({ size:"xsm", selector:"div.broadcast div.avatar", linked:false }, options || {});
    
    // Grab all avatar containers, read the source and create a new avatar with correct options.
	var avatar_size = this.options.size;
	var linked = this.options.linked;
    
	this.avatars = $$(this.options.selector);
    this.avatars.each( function(avatar_div){
	  var opts = {size:avatar_size};
	  if(linked == true) {opts.user = avatar_div.readAttribute("user"); opts.linked = true;}
      var source = avatar_div.readAttribute("source");
      var avatar = new Avatar( avatar_div , source , opts );
    }) 
  }
});


var GroupedActivityControls = Class.create({

	initialize : function() {
		this.groups = $$("#grouped-latest-activity div.group");
		this.group_expanders = [];
		this.broadcast_elements = $$("#grouped-latest-activity div.group div.broadcast");
		this.broadcast_expanders = [];
		this.setupObservers();
	},
	
	setupObservers : function() {

		this.groups.each( function( el ) {
	  		var expander = new Element("div", {"class":"group-expander"});
	      		expander.observe("click", this.groupExpanderClick.bind(this) );
	      		el.insert(expander);
      
		}.bind(this));
		
		this.broadcast_elements.each( function( el ) {
	  		var expander = new Element("div", {"class":"expander"});
	      		expander.observe("click", this.broadcastExpanderClick.bind(this) );
	      		el.insert(expander);
      
		}.bind(this));
		
	},
	
	groupIsActivated : function( clicked ) {
		return (this.group_expanders.indexOf(clicked) == -1) ? true : false;
	},
	
	groupExpanderClick : function( event ) {
		var clicked = event.element();
	    	clicked.toggleClassName("active-expander");
    
		if( this.groupIsActivated(clicked) ) {
		  // this expander group is currently minimized
		  	var group_el = clicked.up();
		  	var list = group_el.select("ol")[0];
				list.show();
		  		this.group_expanders.push(clicked);
		}
		else {
		  	var group_el = clicked.up();
		  	var list = group_el.select("ol")[0];
				list.hide();
			this.group_expanders.splice(this.group_expanders.indexOf(clicked),1);
		}
	},
	
	isActive : function( clicked ) {
		return (this.broadcast_expanders.indexOf(clicked) == -1) ? true : false;
	},

	broadcastExpanderClick : function( event ) {
		var clicked = event.element();
	    	clicked.toggleClassName("active-expander");
    
		if( this.isActive(clicked) ) {
		  // this expander broadcast is currently minimized
		  var broadcast_el = clicked.up();
		  var paragraphs = broadcast_el.select("div.content p");
		      paragraphs.each(function(par) {
		        par.setStyle({display:"block"});
		      });
      
		  this.broadcast_expanders.push(clicked);
		}
		else {
		  // expander is currently maximized
		  var broadcast_el = clicked.up();
		  var paragraphs = broadcast_el.select("div.content p");
		      paragraphs.each(function(par) {
		        par.setStyle({display:"none"});
		      });
		  // remove the element from the expanders array essentially resetting it
		  // as not being clicked.
		  this.broadcast_expanders.splice(this.broadcast_expanders.indexOf(clicked),1);
		}
	}
	
});


var ProfileActivityControls = Class.create({

	initialize : function() {
		this.broadcast_elements = $$("#broadcasts div.broadcast");
		this.expanders = [];
		this.setupObservers();
	},

	setupObservers : function() {

		this.broadcast_elements.each( function( el ) {
	  		var expander = new Element("div", {"class":"expander"});
	      		expander.observe("click", this.expanderClick.bind(this) );
	      		el.insert(expander);
      
		}.bind(this));
	},

	isActive : function( clicked ) {
		return (this.expanders.indexOf(clicked) == -1) ? true : false;
	},

	expanderClick : function( event ) {
		var clicked = event.element();
	    	clicked.toggleClassName("active-expander");
    
		if( this.isActive(clicked) ) {
		  // this expander broadcast is currently minimized
		  var broadcast_el = clicked.up();
		  var paragraphs = broadcast_el.select("div.content p");
		      paragraphs.each(function(par) {
		        par.setStyle({display:"block"});
		      });
      
		  this.expanders.push(clicked);
		}
		else {
		  // expander is currently maximized
		  var broadcast_el = clicked.up();
		  var paragraphs = broadcast_el.select("div.content p");
		      paragraphs.each(function(par) {
		        par.setStyle({display:"none"});
		      });
		  // remove the element from the expanders array essentially resetting it
		  // as not being clicked.
		  this.expanders.splice(this.expanders.indexOf(clicked),1);
		}
	}
});