var spProducts = [];

function eventHandler(id)
{
	spProducts[id].showPanel("imagePanel" + (id+1).toString());
}

function MHandler(evt)
{
	var node="";
	var num="";
	var id="";
	var i=0;
	
	id = evt.currentTarget.id;
	num = id.charAt(id.length-1);
	i = 1*num;
	if (i<1 || i>5)
  	return;

  // get according collapsible panel
	if (evt.type == "mouseover")
		cpMenu[i-1].onTabMouseOver(evt);
	else if (evt.type == "mouseout")
		cpMenu[i-1].onTabMouseOut(evt);
	else if (evt.type == "click")
	{
		if (cpMenu[i-1].isOpen())
		  cpMenu[i-1].close();
		else
		  cpMenu[i-1].open();
	}
}

function InitPage()
{
  var objObserver=null;
	var num="";
	var id=0;
	var node="";
	var dc="#";
  var ele="";
	var i=0;

  for(i=0; i<5; i++)
	{
		node = "emptyPanel" + (i+1).toString();
  	// panels need content for slide function to work
	  Spry.$(node).innerHTML = "&nbsp;";
	  // add mouse event handler
		node = "#imagePanel" + (i+1).toString();
    Spry.$$(node).addEventListener("mouseover", function(evt){MHandler(evt);}, false);
    Spry.$$(node).addEventListener("mouseout", function(evt){MHandler(evt);}, false);
    Spry.$$(node).addEventListener("click", function(evt){MHandler(evt);}, false);
	}

  objObserver = new Object;
  objObserver.onPanelShown = function(notifier, data) {
		// Extract Slider number
		num = data.charAt(data.length-1);
		id = 1 * num;
    eventHandler(id);
  };

  for(i=0; i<5; i++)
	{
    // Turn slidingPanel regions into sliding panel widgets
		node = "slidingPanel" + (i+1).toString();
		ele = dc + node;
    Spry.$$(ele).addClassName("SlidingPanels").setAttribute("tabindex", "0");
		ele = dc + node + " > div";
    Spry.$$(ele).addClassName("SlidingPanelsContentGroup");
		ele = dc + node + " .SlidingPanelsContentGroup > div";
    Spry.$$(ele).addClassName("SlidingPanelsContent");
		// Create widget
    spProducts[i] = new Spry.Widget.SlidingPanels(node, {duration:200});
		// Add observer for notifications (no observer for last slide!)
		if (i<4)
      spProducts[i].addObserver(objObserver);
	}

  // Kickoff sliding sequence
  spProducts[0].showPanel("imagePanel1");
}

Spry.Utils.addLoadListener(InitPage);