/*Constructor for StackRenderer classsssss
	 * 
	 * data - The array of data to be recieved
	 * hclass - the class name of the headline
	 * bclass - the class name of the body
	 * */	
	 
function StackRenderer(o){//data,rtelm,nojs,hclass,bclass
	
	/*console.log("constructor called");*/
	this._elms ;
	this.data = o.data;
	!o.hclass ? this.hclass = "mnheadline" : this.hclass = o.hclass ; //ternary operator
	!o.hclass ? this.hclass = "mnheadline" : this.hclass = o.hclass;
	!o.bclass ? this.bclass = "menu_show" : this.bclass = o.bclass;
	!o.rtelm ? this.rtelm = "mnstacker" : this.rtelm = o.rtelm;
	!o.nojs ? this.nojs = "inner" : this.nojs = o.nojs;
	
	//console.log(this.nojs);
	
}

StackRenderer.prototype.init = function(_elms){
	this._elms = _elms;
	//this.stackData = this._createStack();
	this._renderStack(this._createStack());
	
}

StackRenderer.prototype._renderStack = function(data){
	
	
	/*
	 * this.stackData returns an array of data to 
	 * populate the mininews stack
	 * */
	 
	//this.stackData = this._createStack(this._elms);
	
	/*								
	 * CODE SPECIFIC FOR RENDERING 	*
	 * A STACK REPRESENTATION		*
	 */	 							
	 
	 
	 /* get the root elelemt and remove 
	  * the main content
	  */
	  
	var rootelement = document.getElementById(this.rtelm);
	var mincontent = document.getElementById(this.nojs);
	
	//var rootelement = document.getElementById("mnstacker");
	//var mincontent = document.getElementById("mn_inner");
	rootelement.removeChild(mincontent);
		
	
	var len = data.length;	
	for (var i=0; i<len; i++){
		
		/*var inner =
		'<h3 class="headclose">'+this.stackData[i][1].nodeValue+'</h3>'
		+'<span class="close">CLOSE</span><div class="clear"/>'
		+'<div id=content_"'+[i]+'" class="menu_show">'
		+'<img class="mnstackimg" src="'+this.stackData[i][5].nodeValue+'"/>'
		+'<p><strong>'+this.stackData[i][2].nodeValue+'</strong></p>'
		+'<p>'+this.stackData[i][3].nodeValue+'</p>'
		+'<a class="mnlink" href="'+this.stackData[i][4].nodeValue+'">More of this story from BBC Sport >></a>';*/
		
		
	/* create the html elements we need*/	
			
	var mnHeadline = document.createElement('h3');
	mnHeadline.setAttribute('class','headshow')
	var mnBody = document.createElement('div');
	
	
	//this.mnBody.setAttribute('id','content_'+i);
	//this.mnBody.setAttribute('class','menu_show')
	//this.mnBody.setAttribute('class',this.bclass);
	
	/*this.mnBody.innerHTML = '<h3 class="headclose">'+this.stackData[i][1].nodeValue+'</h3>'
		+'<span class="close">CLOSE</span><div class="clear"/>'
		+'<div id=content_"'+[i]+'" class="menu_show">'
		+'<img class="mnstackimg" src="'+this.stackData[i][5].nodeValue+'"/>'
		+'<p><strong>'+this.stackData[i][2].nodeValue+'</strong></p>'
		+'<p>'+this.stackData[i][3].nodeValue+'</p>'
		+'<a class="mnlink" href="'+this.stackData[i][4].nodeValue+'">More of this story from BBC Sport >></a>';/*/
	
	var p = document.createElement('p');
	var p2 = document.createElement('p');
	var p3 = document.createElement('p');
	var p4 = document.createElement('p');
	
	
	var a = document.createElement('a');
	a.href = data[i].link.nodeValue;
	a.setAttribute('class','mnlink')
	
	var img = document.createElement('img');
	img.setAttribute('class','mnstackimg');
	img.src = data[i].img.nodeValue;
	img.width = 66;
	img.height = 49;
	
	var span = document.createElement('span');
	span.setAttribute('class','close');
	
	var br = document.createElement('br');
	
	var strong = document.createElement('strong');
	
	var clear = document.createElement('br');
	clear.setAttribute('class','clear');
	

	/* create any textnodes we need*/
	var mnReadmore = document.createTextNode("More on this story >>");
	var show = document.createTextNode("show");
	
	/* Create the a headline and a story*/
	span.appendChild(show);
	//mnHeadline.appendChild(data[i].headline);
	mnHeadline.innerHTML = data[i].headline.nodeValue;
	mnBody.appendChild(img);
	//strong.appendChild(data[i].boldHead);
	if(data[i].boldHead.nodeValue == "undefined"){} else {
	strong.innerHTML = data[i].boldHead.nodeValue
	p.appendChild(strong)
	mnBody.appendChild(p)
	}
	if(data[i].p2.nodeValue == "undefined"){} else {
	//p2.appendChild(data[i].p2);
	p2.innerHTML = data[i].p2.nodeValue
	mnBody.appendChild(p2);
	}
	if(data[i].p3.nodeValue == "undefined"){} else {
	//p3.appendChild(data[i].p3);
	p3.innerHTML = data[i].p3.nodeValue
	mnBody.appendChild(p3);
	}
	if(data[i].p4.nodeValue == "undefined"){} else {
	//p4.appendChild(data[i].p4);
	p4.innerHTML = data[i].p4.nodeValue
	mnBody.appendChild(p4);
	}
	mnBody.appendChild(a);
	a.appendChild(mnReadmore);
	
	
	
	/*Append the headline and body together 
	 * and append to the root element*/
	rootelement.appendChild(mnHeadline);
	rootelement.appendChild(span);
	rootelement.appendChild(clear);
	rootelement.appendChild(mnBody);
	
	
			
		}
		
}


StackRenderer.prototype._createStack = function(){
	
	
	
	if (!this._elms){this._elms=this.data.length;}
	if (this._elms==0){return this._errorHandler("Give me some Elements!");}
	if (this._elms > this.data.length){return this._errorHandler("LENGTH TOO LONG");}
	
	/*console.log("the length of the data array is:"+this.data.length);
	console.log("Number of elements: "+this._elms);*/
	
	


	
	/*Iterate through the array of data
	 * Pull out the values and spit the data
	 * into the HTML tags*/	
	 
	this.arr = new Array();
	for (var i=0; i<this._elms; i++){
		this.arr[i] = new Array();
		this.arr[i].headline = document.createTextNode(this.data[i].title);
		this.arr[i].boldHead = document.createTextNode(this.data[i].par1);
		this.arr[i].p2 = document.createTextNode(this.data[i].par2);
		this.arr[i].p3 = document.createTextNode(this.data[i].par3);
		this.arr[i].p4 = document.createTextNode(this.data[i].par4);
		this.arr[i].link = document.createTextNode(this.data[i].link);
		this.arr[i].img = document.createTextNode(this.data[i].thumb.url);
	}
	return this.arr;
	
}

	
	StackRenderer.prototype._errorHandler = function( err ) {
		if(console && console.log){"ERROR : "+console.log(err);}
		return false;
	}