window.onload = function(){
	init('article');
};

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];      
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }   
    }
    return (arrReturnElements)
}

function init(theClass){
	articles = getElementsByClassName(document, "div", theClass);
	hideButOne(0, articles);
	createNav(0);	
}

function hideButOne(id, elArray){
	var id = parseInt(id);
	for(i=0;i<elArray.length;i++){
		if(i!=id){
			elArray[i].style.display = "none";
		}else{
			elArray[i].style.display = "block";
		}
	}
}

function createNav(id){
	var next = document.getElementById('next');
	var previous = document.getElementById('prev');
	
	if(id == 0){
		next.style.display = "block";
		previous.style.display = "none";
	}else if (id == articles.length-1){
		next.style.display = "none";
		previous.style.display = "block";
	}else{
		next.style.display = "block";
		previous.style.display = "block";
	}
	
	next.onclick = function(){changeTo(id+1);}
	previous.onclick = function(){changeTo(id-1);}
}

function changeTo(id){
	hideButOne(id, articles);
	createNav(id);
}