ToggleMenu = function(containerElement)
{
	this.myContentContainerArray = [];
	//creating an instance of newsi.HTML.DOM() so we can use its methods - now changing to FMTJ
	this.dom = new newsi.HTML.DOM();
	this._parentContainer = containerElement;
	
	
	
	
	
	this._initialiseAppearance();
	this._currentActive = -1;
	this._newActive = -1;
	this._toggleClickedHeadline([-1]);
	
	//this._addEvents();
}


//step 4:create an array of ONLY all divs whose parentId="main"

 
 ToggleMenu.prototype._initialiseAppearance = function()
 {
 	this._getContentContainers();
 	this._createHeadlineArray();
 	var len = this.myHeadlineArray.length;
 	for(var i = 0; i < len; i++){
 		this._setHeadlineIds(i);
 		this._setHeadlineClass(i);
 		this._addEvents(i);
 		//this._addIdsToContentContainers(i);
 		this._addClassesToContentContainers(i);
 	}
 }
  ToggleMenu.prototype._getContentContainers = function( ) 
 {
 	var divs = this.dom.gebtn( { parent : this.dom.e_gebid( this._parentContainer ), el: "div" } );
	var len = divs.length;
	for (var i=0 ; i < len ; i++ ) {
		if ( divs[i].parentNode.id == this._parentContainer ) {
				this.myContentContainerArray.push(divs[i]) ;
		}
	}
}		
//step 1:create new array of all dd elements. these represent our headings in news stories
 ToggleMenu.prototype._createHeadlineArray = function()
 {
 	this.myHeadlineArray = new Array();
 	this.myHeadlineArray = this.dom.gebtn( { parent : this.dom.e_gebid( this._parentContainer ), el: "span" } );
 	 //AF added array of head classes, as these need to change too
 	this.myHeaderArray = new Array();
 	this.myHeaderArray = this.dom.gebtn( { parent : this.dom.e_gebid( this._parentContainer ), el: "h3" } ); 
 }
 
 ToggleMenu.prototype._setHeadlineClass = function(i) 
 {
	 this.dom.setClass( {el:this.myHeadlineArray[i], className:"show"} );
	 this.dom.setClass( {el:this.myHeaderArray[i], className:"headshow"} );
 }

//step 2:set an id to each dd element in the array created above
 ToggleMenu.prototype._setHeadlineIds = function(i)
 {
	this.dom.setId( { el:this.myHeadlineArray[i], id:this._parentContainer+"_"+"hline"+i } );
	this.dom.setId( { el:this.myHeaderArray[i], id:this._parentContainer+"_"+"header"+i } );
 }
 
//step 3:create an array of all div elements contained in <div id="main"> which we saved as this._parentContainer



//step 5: add Ids to all div elements in array this.myContentContainerArray

 ToggleMenu.prototype._addClassesToContentContainers = function(i) 
 {
	
	this.dom.setClass( {el:this.myContentContainerArray[i], className:"displaynone"} );
	
 }
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//need to revisit this method
//step missed: creating an array that we will use here for the div ids.

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//step 1:create event listers for all the onclick events on the array of elements in myHeadlineArray (the headings)
 ToggleMenu.prototype._addEvents = function(i)
 {
	new newsi.Event().addListener ( "onclick" , this.myHeadlineArray[i].id , this , "_toggleClickedHeadline" , "false", i ) ;
 }

//step 2: set default values for currActive and newActive


ToggleMenu.prototype._isActive = function()
{
 if(this._currentActive == this._newActive){
 	return true;
 }
 	return false;
}

//_toggleClickedHeadline method
ToggleMenu.prototype._toggleClickedHeadline = function( o )
 {
	//var click_id = (o[0]); //- whats the id of clicked headline
	this._newActive = (o[0]);
	//alert("old: "+this._currentActive +" new: "+ this._newActive);
	//call hide method and parse in this.currActive
	this._hideStory();

		if(this._isActive())
		{
		
		if(this._currentActive != -1){this._hideStory();this._currentActive = -1;//closes current if open
		return;
		}
			this._currentActive = this._newActive;
			
		}else
		{
			//call show method and parse in newActive;
			this._showStory();
			//set currActive = newActive as shown below
			this._currentActive = this._newActive;
		}


}

ToggleMenu.prototype._toggle = function(label1,label2,class1,class2)
{
	//alert("show story: "+this._newActive);
	this.dom.setClass( {el:this.myContentContainerArray[this._newActive], className:"menu_"+class1} );
	if(this._currentActive != -1)
	{
		this.myHeadlineArray[this._currentActive].innerHTML = "show" ;
		//change class of clicked
		this.dom.setClass( {el:this.myHeadlineArray[this._currentActive], className:"m_"+class2} );
	}
	
		this.myHeadlineArray[this._newActive].innerHTML = "close";
		//change class of clicked
		this.dom.setClass( {el:this.myHeadlineArray[this._newActive], className:"m_"+class1} );
	
}
//show method
ToggleMenu.prototype._showStory = function()
{
	//alert("show story: "+this._newActive);
	this.dom.setClass( {el:this.myContentContainerArray[this._newActive], className:"menu_show"} );
	if(this._currentActive != -1)
	{
		this.myHeadlineArray[this._currentActive].innerHTML = "show";
		//change class of clicked
		this.dom.setClass( {el:this.myHeadlineArray[this._currentActive], className:"show"} );
		//AF 
		this.dom.setClass( {el:this.myHeaderArray[this._currentActive], className:"headshow"} );
	}
	
		this.myHeadlineArray[this._newActive].innerHTML = "close";
		//change class of clicked
		this.dom.setClass( {el:this.myHeadlineArray[this._newActive], className:"close"} );
		//AF
		this.dom.setClass( {el:this.myHeaderArray[this._newActive], className:"headclose"} );
	
}
//hide method
ToggleMenu.prototype._hideStory = function()
{
	if(this._currentActive == -1)
	{
		//alert("hiding story initially showing story");
	}else{
	//alert("hide story: "+this._currentActive);
	this.dom.setClass( {el:this.myContentContainerArray[this._currentActive], className:"displaynone"} );
	if(this._currentActive != -1)
	{
		this.myHeadlineArray[this._currentActive].innerHTML = "close";
		//change class of clicked
		this.dom.setClass( {el:this.myHeadlineArray[this._currentActive], className:"close"} );
		//AF
		this.dom.setClass( {el:this.myHeaderArray[this._currentActive], className:"headclose"} );
	}
		//change text to show
		this.myHeadlineArray[this._newActive].innerHTML = "show";
		//change class of clicked
		this.dom.setClass( {el:this.myHeadlineArray[this._newActive], className:"show"} );
		//AF
		this.dom.setClass( {el:this.myHeaderArray[this._newActive], className:"headshow"} );
	}
	
}