// just wanted to keep this as contained as possible so we have to do the include like this
document.writeln('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>');

// init vars
var pageWidth = 636; // page width for dynamic resizing
var imageContainerWidth = 136;
var imageContainerHeight = 185;
var imageWidth = imageContainerWidth - 6;
var imageHeight = imageContainerHeight - 60;
var z = 1; // in case we have more than one product box per page
var page = new Array(); 
var title = new Array();
var image = new Array();
var url = new Array();
var numProducts = new Array();
var itemsPerPage = new Array();
var numPages = new Array();

// start the product box display
function productBox(xmlFile){
	// create ajax call
	$.ajax({
		async: false,
		url: xmlFile,
		success: function(data) {buildProductBoxContainer(data, z);}
	});
	
	z++; // increment counter for number of product boxes
}

// build the product box display
function buildProductBoxContainer(data, id) {
	if ($.isXMLDoc(data)){
		var $productBox = $('div.productBox' + id); 
		var htmlString ='';
		var productBoxWidth = '';
		// grab data from the XML output
		page[id] = 1;
		itemsPerPage[id] = data.getElementsByTagName('itemsPerPage')[0].childNodes[0].nodeValue;
		numProducts[id] = data.getElementsByTagName('product').length;
		numPages[id] = parseInt(numProducts[id] / itemsPerPage[id]);
		// check to see if we have any leftovers we need to add a page for
		if ((numProducts[id] % itemsPerPage[id]) > 0)
			numPages[id] += 1;
		title[id] = data.getElementsByTagName('title');
		image[id] = data.getElementsByTagName('image');
		url[id] = data.getElementsByTagName('url');
			
		// begin creating the html to fill the box
		htmlString = ' \
		<div class="pageNumContainer' + id + '"> \
			<select class="pageSelect' + id + '" id="pageSelect' + id + '" onchange="move(' + id + ', this.value)">';
			for (var k = 1; k <= numPages[id]; k++) {
				htmlString += '<option value="' + k + '">' + k + '</option>';
			}
		htmlString += '</select> of ' + numPages[id] + '</div> \
		<div class="productBoxDisplay' + id + '">';
			if (itemsPerPage[id] == 1) {
				htmlString += ' \
				<div class="productBoxContainer' + id + '">' + buildProductBoxes(id) + '</div> \
				<img class="leftArrow' + id + '" src="http://www.pecentral.org/productBox/images/btn_Left_Arrow.png" onclick="move(' + id + ', \'l\');" /> \
				<img class="rightArrow' + id + '" src="http://www.pecentral.org/productBox/images/btn_Right_Arrow.png" onclick="move(' + id + ', \'r\');" />';
			} else {
				htmlString += ' \
				<img class="leftArrow' + id + '" src="http://www.pecentral.org/productBox/images/btn_Left_Arrow.png" onclick="move(' + id + ', \'l\');" /> \
				<div class="productBoxContainer' + id + '">' + buildProductBoxes(id) + '</div> \
				<img class="rightArrow' + id + '" src="http://www.pecentral.org/productBox/images/btn_Right_Arrow.png" onclick="move(' + id + ', \'r\');" />';
			}
		htmlString += '</div>';
		
		// write the html to the container div
		$productBox.html(htmlString);
		
		// grab the elements
		var $pageNumContainer = $('div.pageNumContainer' + id); 
		var $productBoxDisplay = $('div.productBoxDisplay' + id); 
		var $productBoxContainer = $('div.productBoxContainer' + id); 
		var $leftArrow = $('img.leftArrow' + id); 
		var $rightArrow = $('img.rightArrow' + id);
		var $pageSelect = $('select.pageSelect' + id);
		
		// some style calculations
		if (itemsPerPage[id] == 4) 
			productBoxWidth = pageWidth + 'px';
		else if (itemsPerPage[id] == 3)
			productBoxWidth = (pageWidth - imageContainerWidth) - 4 + 'px';
		else if (itemsPerPage[id] == 2)
			productBoxWidth = (pageWidth - imageContainerWidth * 2) - 8 + 'px';
		else if (itemsPerPage[id] == 1)
			productBoxWidth = (pageWidth - imageContainerWidth * 3) - 76 + 'px';
			
		// set the styles	
		if (itemsPerPage[id] == 1) {
			$pageNumContainer.css(cssOjb = {'text-align':'right', 'padding-right':'10px'});
			$productBoxContainer.css(cssOjb = {'vertical-align':'middle'});
		} else {
			$pageNumContainer.css(cssOjb = {'text-align':'right', 'padding-right':'42px'});
			$productBoxContainer.css(cssOjb = {'display':'inline-block', 'vertical-align':'middle'});
		}
		
		$productBox.css(cssObj = {'margin':'auto', 'width':productBoxWidth, 'height':'220px', 'color':'black'});
		$productBoxDisplay.css(cssOjb = {'text-align':'center'});
		$leftArrow.css(cssObj = {'':''});
		$rightArrow.css(cssObj = {'':''});
		$pageSelect.css(cssObj = {'font-size':'8pt'});
		
		// set the style for the image container
		setImageContainerStyles(id);
	}
}

// sets the style for the image container b/c we do it every reload
function setImageContainerStyles(id) {
	var $imageContainer = $('div.imageContainer' + id);
	var $imageContainerUpper = $('div.imageContainerUpper' + id);
	var $imageContainerLower = $('div.imageContainerLower' + id);
	var $imageHref = $('a.imageHref' + id);
	var $productImage = $('img.productImage' + id);
	
	if (itemsPerPage[id] == 1)
		$imageContainer.css(cssObj = {'display':'inline-block', 'margin':'2px 1px 8px 1px', 'padding-top':'3px', 'border':'1px solid black', 'height':imageContainerHeight + 'px','width':imageContainerWidth + 'px', 'vertical-align':'top', 'background-color':'white'});
	else
		$imageContainer.css(cssObj = {'display':'inline-block', 'margin':'2px 1px 40px 1px', 'padding-top':'3px', 'border':'1px solid black', 'height':imageContainerHeight + 'px','width':imageContainerWidth + 'px', 'vertical-align':'top', 'background-color':'white'});
	
	$imageContainerUpper.css(cssObj = {'height':imageHeight + 'px'});
	$imageContainerLower.css(cssObj = {'word-wrap':'break-word', 'padding':'0px 5px'});
	$productImage.css(cssObj = {'max-height':imageHeight + 'px','max-width':imageWidth + 'px','border':'0px', 'bottom':'0px'});
	$imageHref.css(cssObj = {'text-decoration':'none'});
}

// insert the group of elements into the product box
function buildProductBoxes(id) {
	var insertString = '';
	for (var j = (page[id] * itemsPerPage[id]) - itemsPerPage[id]; j < (page[id] * itemsPerPage[id]); j++){
		insertString += '<div class="imageContainer' + id + '">';
		if (j < numProducts[id]) {
			try {
				insertString += ' \
				<a class="imageHref' + id + '" href="' + url[id][j].childNodes[0].nodeValue + '" target="_new"> \
					<div class="imageContainerUpper' + id + '"><img class="productImage' + id + '" src="' + image[id][j].childNodes[0].nodeValue + '" /></div> \
					<div class="imageContainerLower' + id + '">' + title[id][j].childNodes[0].nodeValue + '</div> \
				</a>';
			} catch (e) {
				insertString += ' \
				<div class="imageContainerUpper' + id + '"><img class="productImage' + id + '" src="' + image[id][j].childNodes[0].nodeValue + '" /></div> \
				<div class="imageContainerLower' + id + '">' + title[id][j].childNodes[0].nodeValue + '</div>';
			}
		}
		insertString += '</div>';
	}	
	return insertString;
}

// move around within the product box
function move(id, thisPage) {
	// set the page to reflect how we're moving
	if (thisPage == 'l')
		page[id] = page[id] - 1;
	else if (thisPage == 'r')
		page[id] = page[id] + 1;
	else
		page[id] = parseInt(thisPage);
		
	if (page[id] < 1)
		// if we reached past the beginning go to the end
		page[id] = numPages[id];
	else if (page[id] > numPages[id])
		// if we reached the end start over at the beginning
		page[id] = 1;
		
	if (thisPage == 'l' || thisPage == 'r')
		document.getElementById('pageSelect' + id).selectedIndex = page[id] - 1;
		
	var $productBox = $('div.productBoxContainer' + id);
	$productBox.html(buildProductBoxes(id));
	setImageContainerStyles(id);
}