// set up global for ptoggleArray
var ptoggleArray = new Array;

Object.extend(Element, {
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

// setup the ppanels class
var ProductPanels = Class.create();

ProductPanels.prototype = {

	initialize: function() {

		// grab all of the ppanels and hide them
		var ppanels = document.getElementsByClassName('ppanel-content');
		
		for (var i=0; i<ppanels.length; i++) {
			
			var ppanel = ppanels[i];
			
			ppanel.style.display = 'none';
			
		}

		// grab all of the ptoggle parents				
		var ptoggleParents = document.getElementsByClassName('ptoggle');

		// loop through the ptoggle parents and setup an onclick event for each of the ptoggles
		for (var t=0; t<ptoggleParents.length; t++) {

			var ptoggleParent = ptoggleParents[t];

			// ok we have the ptoggle parents now get the actual ptoggle
			// the real ptoggle is the first child of the ptoggle parent
			var realPtoggle = ptoggleParent.firstChild;
			
			// check for white space nodes and fix the real ptoggle if needed
			// this is more than likely the case due to new lines and indenting in my HTML
			// these will be considered as text nodes so we need to jump past them if they exist
			if (realPtoggle.nodeType == "3") {
				
				// 3 is the node type for text nodes
				
				// yep white space, jump to next sibling
				realPtoggle = realPtoggle.nextSibling;
				
			}
			
			// here is the onclick event, I can't use an event listener because IE will fail
			realPtoggle.onclick = function() {

				if (document.getElementById('close-ppanel')) {

					// if we are just closing a ppanel
					myProductPanels.end(this);

				} else if (document.getElementById('open-ppanel')) {

					// if we are closing a ppanel and opening another simaltainiously
					myProductPanels.moveOn(this);

				} else if (!document.getElementById('open-ppanel') && !document.getElementById('close-ppanel')) {

					// if we are just opening a ppanel
					myProductPanels.start(this);

				}
				
				return false;

			}

		}	

		// all done ready to run
		return false;

	},

	end: function(ptoggle) {	
		
		// this stuff resets text, id and class info on the footer link
		// shit man this seems to be never ending...
		var ptoggleTwo = $('close-ppanel').className;
		
		var currentPtoggles = document.getElementsByClassName(ptoggleTwo);
		
		// reset the text on the footer ptoggle, thak god this is simpler than setting it
		// we just need to do it backwards, before we remove current-ppanel
		if ($('current-ppanel')) Element.setInnerHTML('current-ppanel', 'Expand');
			
		currentPtoggles[1].firstChild.className = 'ppanel-closed';			
		currentPtoggles[1].firstChild.nextSibling.id = '';

		// clean up all or any open ppanels
		if ($('open-ppanel')) $('open-ppanel').id = '';
		if ($('spare-open-ppanel')) $('spare-open-ppanel').id = '';
		
		// grab the class name of the ptoggle we just clicked to match it with the ppanel we want to close
		var closeThis = $('close-ppanel').className;

		// do the magic
		new Effect.Parallel(
		[
			new Effect.SlideUp(closeThis),
			new Effect.Fade(closeThis, {
				from:1.0,
				to:0.0
			})
		],
			{
				duration:0.5
			}
		);
		
		// fix the title
		$('close-ppanel').title = 'Expand';		
		
		// empty the id
		$('close-ppanel').id = '';

		// all done
		return false;

	},

	start: function(ptoggle) {

		// ok nothing is open so lets open the ppanel we requested
		// first set the id to open so the rest of the script knows what to do
		if (!document.getElementById('open-ppanel')) ptoggle.id = 'open-ppanel';
		
		// we are working with 2 ptoggles per ppanel here so we need to append an id
		// to the other ptoggle aswell, but it can't be the same id because all id's should be unique
		// so now we need to get the other ptoggle element somehow.
		var ptoggleTwo = $('open-ppanel').className;
		
		var currentPtoggles = document.getElementsByClassName(ptoggleTwo);		
				
		for (var i=0; i<currentPtoggles.length; i++) {
			if (currentPtoggles[i].id != 'open-ppanel') {
				
				// heres the one we need to fix, not open-ppanel
				currentPtoggles[i].id = 'spare-open-ppanel';
				
			}
		}				

		// grab the class name of the ptoggle we just clicked to match it with the ppanel we want to open
		var openThis = ptoggle.className;

		// do the magic
		new Effect.Parallel(
		[
			new Effect.SlideDown(openThis),
			new Effect.Appear(openThis, {
				from:0.0,
				to:1.0
			})
		],
			{
				duration:0.5
			}
		);

		// Ok it's open now change the title attribute so it makes sense
		$('open-ppanel').title = 'Contract';
		
		// set the span class on the footer ptoggle so I can use the opened icon
		
		// if the footer ptoggle wasn't clicked
		if ($('spare-open-ppanel').tagName == 'A') {
			
			$('spare-open-ppanel').firstChild.className = 'ppanel-opened';			
			$('spare-open-ppanel').firstChild.nextSibling.id = 'current-ppanel';
			
		}
		
		// if it was clicked
		if ($('open-ppanel').tagName == 'A') {			
			
			$('open-ppanel').firstChild.className = 'ppanel-opened';			
			$('open-ppanel').firstChild.nextSibling.id = 'current-ppanel';			
			
		}
		
		// this bit won't matter, just change the text no matter what
		// set the inner html on the second ptoggle which is the a tag in the cat footer
		// we'll have to move the inner html to the strong tag... so
		Element.setInnerHTML('current-ppanel', 'Contract');		
		
		// all done
		return false;

	},

	moveOn: function(myPtoggle) {

		// first setup the objects we want to open and close
		var openThis = myPtoggle.className;
		var closeThis = $('open-ppanel').className;		

		// if the ppanel is open send it to end if it's ptoggle(s are) is clicked again
		if ($('open-ppanel') == myPtoggle) {

			// give the open ppanel a new id so everything keeps working
			$('open-ppanel').id = 'close-ppanel';
			
			// jump to the end
			myProductPanels.end(this);

			// stop passing the moveOn script
			return;
			
		} else if ($('spare-open-ppanel') == myPtoggle) {
						
			// give the open ppanel a new id so everything keeps working
			$('open-ppanel').id = 'close-ppanel';
			
			// jump to the end
			myProductPanels.end(this);

			// stop passing the moveOn script
			return;
			
		}		
		
		// Check for the opened ppanel
		if ($('open-ppanel')) {
			
			// set the span class on the footer ptoggle so I can use the opened icon
			
			// this bit won't matter, just change the text no matter what
			// set the inner html on the second ptoggle which is the a tag in the cat footer
			// we'll have to move the inner html to the strong tag... so
			Element.setInnerHTML('current-ppanel', 'Expand');
			
			// if the footer ptoggle wasn't clicked
			if ($('spare-open-ppanel').tagName == 'A') {
				
				$('spare-open-ppanel').firstChild.className = 'ppanel-closed';			
				$('spare-open-ppanel').firstChild.nextSibling.id = '';
				
			}
			
			// if it was clicked
			if ($('open-ppanel').tagName == 'A') {			
				
				$('open-ppanel').firstChild.className = 'ppanel-closed';			
				$('open-ppanel').firstChild.nextSibling.id = '';			
				
			}			
			
			// do the "open this ppanel close that ppanel" thing
			new Effect.Parallel(
			[
				new Effect.SlideUp(closeThis),
				new Effect.Fade(closeThis, {
					from:1.0,
					to:0.0
				}),
				new Effect.SlideDown(openThis),
				new Effect.Appear(openThis, {
					from:0.0,
					to:1.0
				})
			],
				{
					duration:0.5
				}
			);			
			
			// fix the title
			$('open-ppanel').title = 'Expand';						
			
			// this ppanel is now closed so remove the open-ppanel ID
			$('open-ppanel').id = '';

			// ok we're moving on so we need to remove the spare ptoggle id
			// otherwise it'll get left behind on the ppanel we just closed
			$('spare-open-ppanel').id = '';			

		}		
		
		// fix the title
		myPtoggle.title = 'Contract';

		// and set the open-ppanel ID on the ptoggle that was just clicked
		myPtoggle.id = 'open-ppanel';
		
		
		// we are working with 2 ptoggles per ppanel here so we need to append an id
		// to the other ptoggle aswell, but it can't be the same id because all id's should be unique
		// so now we need to get the other ptoggle element somehow.
		var ptoggleTwo = $('open-ppanel').className;
		
		var currentPtoggles = document.getElementsByClassName(ptoggleTwo);		
				
		for (var i=0; i<currentPtoggles.length; i++) {
			if (currentPtoggles[i].id != 'open-ppanel') {
				
				// heres the one we need to fix, not open-ppanel
				currentPtoggles[i].id = 'spare-open-ppanel';
				
			}
		}
		
		// set the span class on the footer ptoggle so I can use the opened icon
		
		// if the footer ptoggle wasn't clicked
		if ($('spare-open-ppanel').tagName == 'A') {
			
			$('spare-open-ppanel').firstChild.className = 'ppanel-opened';			
			$('spare-open-ppanel').firstChild.nextSibling.id = 'current-ppanel';
			
		}
		
		// if it was clicked
		if ($('open-ppanel').tagName == 'A') {			
			
			$('open-ppanel').firstChild.className = 'ppanel-opened';			
			$('open-ppanel').firstChild.nextSibling.id = 'current-ppanel';			
			
		}
		
		// this bit won't matter, just change the text no matter what
		// set the inner html on the second ptoggle which is the a tag in the cat footer
		// we'll have to move the inner html to the strong tag... so
		Element.setInnerHTML('current-ppanel', 'Contract');		
				
		// all done
		return false;

	}
};


function initProductPanels() {if (!document.getElementById('product-panels')) return; myProductPanels = new ProductPanels();};