//storing each element properties
var elementStorage = new Array();


var storeRefToElements = new Array();
var storeRefToButtons = new Array();
var storeId = new Array();
var storeCurrentSlide = 0;
var slideTimer;
var slideTime = 12500;

var currentSubLikinBuild = 0;	

function init_news_element(elementStorage) {
	var elementContainerID = document.getElementById('elementContainerID');
	var pharmaEd = document.getElementById('pharmaEd');
	//loop through all elements and create all elements
	for (var i=0;i<elementStorage.length;i++){
		//create the photos area and store
		storeRefToElements[i] = document.createElement("DIV");
		var imageURL = elementStorage[i][0];
		storeRefToElements[i].innerHTML = "<img src=\""+imageURL+"\" width=\"714\" />";
		storeRefToElements[i].style.left=(i*720)+"px";
		storeRefToElements[i].style.top="0px";
		storeRefToElements[i].style.position = "absolute";
		elementContainerID.appendChild(storeRefToElements[i]);

		//create overlap with alpha
		var oNewBar  = document.createElement("DIV");
		oNewBar.id = "barID";
		oNewBar.style.backgroundColor = "#0066CC";
		oNewBar.style.width = "720px";
		oNewBar.style.height = "82px";
		oNewBar.style.left=(i*720)+"px";
		oNewBar.style.top="134px";
		oNewBar.style.position = "absolute";
		oNewBar.style.opacity="0.64";
		elementContainerID.appendChild(oNewBar);

		//create the the title text
		var oNewText = document.createElement("DIV");
		oNewText.style.color="white";
		oNewText.style.fontSize = "20px";
		oNewText.style.fontWeight = "bold";
		oNewText.style.left = (i*720)+(20)+"px";;
		oNewText.style.top = "140px";
		oNewText.style.position = "absolute";
		oNewText.innerHTML = elementStorage[i][2];
		elementContainerID.appendChild(oNewText);

		
		//loop through the nested elements. so each element can have 1,2 or 3 links
		var subLinksStartX = 0;
		for (var x=0;x<elementStorage[i][3].length;x++){
			var oNewSubLink = document.createElement("DIV");
			oNewSubLink.id = "sublinker"+currentSubLikinBuild;
			oNewSubLink.className="link_holder";
			oNewSubLink.style.left = (i*720)+(20)+subLinksStartX+"px";
			oNewSubLink.style.top = "165px";
			oNewSubLink.style.position = "absolute";
			if(elementStorage[i][3][x][0]) {
				oNewSubLink.innerHTML = "<span>&#187;</span><a href=\""+elementStorage[i][3][x][0]+"\">"+elementStorage[i][3][x][1]+"</a>";
			} else {
				oNewSubLink.innerHTML = "<span>&#187;</span><a>"+elementStorage[i][3][x][1]+"</a>";
			}
			elementContainerID.appendChild(oNewSubLink);
			var w=document.getElementById("sublinker"+currentSubLikinBuild).offsetWidth;
			subLinksStartX += (w+40);
			currentSubLikinBuild++;
		}
		
		elementContainerID.onmouseover = pause_slider;
		elementContainerID.onmouseout = unpause_slider;

		//create the buttons on right side
		var oNewButton = document.createElement("DIV");
		//store reference to button
		storeRefToButtons[i]=oNewButton;
		oNewButton.da = i;
		//draw button
		oNewButton.style.backgroundColor = "#ffffff";
		oNewButton.style.left = "720px";
		oNewButton.style.top = (i*72)+(4)+"px";
		oNewButton.style.width = "226px";
		oNewButton.style.height = "64px";
		oNewButton.style.position = "absolute";
		oNewButton.style.borderRadius = "4px";

		//create the thumbnail photos
		var oNewButtonImg = document.createElement("DIV");
		var imageURL =  elementStorage[i][1];
		oNewButtonImg.innerHTML = "<img src="+ imageURL+" width='119' height='36' />";
		oNewButtonImg.style.left="5px";
		oNewButtonImg.style.top="5px";
		oNewButtonImg.style.position = "absolute";
		oNewButton.appendChild(oNewButtonImg);

		//create the title in button
		var oNewButtonTitle = document.createElement("DIV");
		var id = "buttonTitleID_"+i;
		oNewButtonTitle.id=id;
		oNewButtonTitle.style.color="#999999";
		oNewButtonTitle.style.opacity="1";
		oNewButtonTitle.style.fontSize = "13px";
		oNewButtonTitle.style.fontWeight = "bold";
		oNewButtonTitle.style.left = "5px";;
		oNewButtonTitle.style.top = "45px";
		oNewButtonTitle.style.position = "absolute";
		oNewButtonTitle.innerHTML =  elementStorage[i][2];;
		oNewButton.appendChild(oNewButtonTitle);
		//add a mouse over function
		oNewButton.onmouseover = mouseOverButton_init;
//		oNewButton.onmouseover = mouseOverButton;
		oNewButton.onmouseout = mouseOutButton;
	}

	//place button within pharmaEd, ie add to screen
	for(s=0; s<storeRefToButtons.length; s++) {
		pharmaEd.appendChild(storeRefToButtons[s]);
	}

	//turn on button 0
	fakeMouseOver(storeRefToButtons[storeCurrentSlide]);

	//set off automatic timer to call slide
	slideTimer=setTimeout("runAutoSlide()",slideTime);
}

function runAutoSlide() {
	if(slider_paused) {
		
	} else {
		//fake a mouse over	storeCurrentSlide
		fakeMouseOut(storeRefToButtons[storeCurrentSlide]);
		storeCurrentSlide +=1;
		if (storeCurrentSlide > 2){
			storeCurrentSlide = 0;
		}
		fakeMouseOver(storeRefToButtons[storeCurrentSlide]);
	}
	//set off automatic timer to call slide
	slideTimer=setTimeout("runAutoSlide()",slideTime);
}

function fakeMouseOut(mouseRef) {
	mouseRef.style.backgroundColor = "white"
	var id = "buttonTitleID_"+mouseRef.da;
	var changeText = document.getElementById(id);
	changeText.style.color="#999999";
	
}

function fakeMouseOver(mouseRef) {
	//hilight this button	
	mouseRef.style.backgroundColor = "#0066CC"
	var id = "buttonTitleID_"+mouseRef.da;
	var changeText = document.getElementById(id);

	changeText.style.color="white";
	var movingObject = document.getElementById("elementContainerID");
	var fromPos = new Spry.Effect.Utils.Position();
	
	fromPos.x = movingObject.offsetLeft;
	fromPos.y = 0;
	var toPos = new Spry.Effect.Utils.Position();
	toPos.x = (720*mouseRef.da)*-1;
	toPos.y = 0;
	Spry.Effect.makePositioned(movingObject);
	
	var move_effect = new Spry.Effect.Move("elementContainerID", fromPos, toPos, {duration: 500, toggle: true, transition: Spry.sinusoidalTransition});
	move_effect.start();
}

function mouseOutButton(mouseEvent) {
	//fakeMouseOut(this);
	//continue timer
	//slideTimer=setTimeout("runAutoSlide()",slideTime);
	window.clearTimeout(slideTimer_init);
}

var slideTimer_init = false;
var temp_obj = false;

function mouseOverButton_init(mouseEvent) {
	window.clearTimeout(slideTimer_init);
	temp_obj = this;
	slideTimer_init = window.setTimeout("mouseOverButton(temp_obj)", 175);
}

function mouseOverButton(obj) {
	//stop auto timer
	window.clearTimeout(slideTimer);
	//do fake mouse out
	fakeMouseOut(storeRefToButtons[storeCurrentSlide]);
	storeCurrentSlide = obj.da;
	fakeMouseOver(obj);
	//FOR IPOD set timer to go off 3*normal?
	slideTimer=window.setTimeout("runAutoSlide()", slideTime*3);
}

var slider_paused = false;

function pause_slider() {
	slider_paused = true;
}

function unpause_slider() {
	slider_paused = false;
}