/*
 * file: modulex.display.js
 * -
 * What: Modulex HTML display main Object
 * When: -
 * Why: -
 */
 
/* Global variables */
var gModulexDisplayConfig = {
	speed: 0.4,
	alphaSpeed: 0.2
};

/*
 * object: Modulex.Display
 * -
 * What: 
 * When: 
 * Why: 
 */
 
Modulex.Display = {
	
	/*
	 * function: Modulex.Display.updateCategoryList()
	 * -
	 * What: 
	 * When: 
	 * Why: 
	 */
	 
	updateCategoryList: function() {
		
		/* Empty content if exist */
		while ($("menuCategories").firstChild) {
		  $("menuCategories").removeChild($("menuCategories").firstChild);
		}
		
		var ul;
		var li;
		
		/* Creating UL tag */
		ul = Builder.node('ul', {className: 'menuList'});
		$("menuCategories").appendChild(ul);
						
		/* Parsing each element of the Array */
		for(var i=0;i<gModulexCategoryArray.length;i++) {
			
			/* Display 1st category as "nouveautes" */
			switch(i) {
				case 1:
					li = Builder.node('li', [
						Builder.node('hr'),
						Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.filterModelsByCategory('+i+');', className: 'nouveautes'}, gModulexCategoryArray[i]),
						Builder.node('hr')
					]);
					break;
				default:
					li = Builder.node('li', [
						Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.filterModelsByCategory('+i+');'}, gModulexCategoryArray[i])
					]);
			}
			
			/* If this is current category add className "selected" */
			if(i.toString() == gModulexCurrentCategory) {
				li.className = "selected";
			} else {
				li.className = undefined;
			}
			
			ul.appendChild(li);
		}
		
		/* AllModels link */
		li = Builder.node('li', [
			Builder.node('hr'),
			Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.filterAllModels();'}, gModulexLocalVar_allModels)
		]);
		
		switch(gModulexCurrentCategory) {
			case null:
			case undefined:
			case false:
				li.className = "selected"
				break;
			default:
				li.className = undefined;
		}
		
		ul.appendChild(li);
		
		return true;
	},
	
	/*
	 * function: Modulex.Display.updatePriceRangeList()
	 * -
	 * What: 
	 * When: 
	 * Why: 
	 */
	 
	updatePriceRangeList: function() {
	
		/* Empty content if exist */
		while ($("menuPriceRanges").firstChild) {
		  $("menuPriceRanges").removeChild($("menuPriceRanges").firstChild);
		}
	
		var ul;
		var li;
		
		/* Creating UL tag */
		ul = Builder.node('ul', {className: 'menuList'});
		$("menuPriceRanges").appendChild(ul);
						
		/* Parsing each category node */
		for(var i=0;i<gModulexPriceRangeArray.length;i++) {
			
			if(gModulexPriceRangeArray[i] != undefined) {
			
				li = Builder.node('li', [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.filterModelsByPriceRange('+i+');'}, gModulexPriceRangeArray[i].name)
				]);
				
				/* If this is current priceRange add className "selected" */
				if(i.toString() == gModulexCurrentPriceRange) {
					li.className = "selected";
				} else {
					li.className = undefined;
				}
				
				ul.appendChild(li);
			
			}
		}
		
		/* AllPrices link */
		li = Builder.node('li', [
			Builder.node('hr'),
			Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.filterAllPriceRange();'}, gModulexLocalVar_allPrices)
		]);
		
		switch(gModulexCurrentPriceRange) {
			case null:
			case undefined:
			case false:
				li.className = "selected";
				break;
			default:
				li.className = undefined;
		}
		
		ul.appendChild(li);
		
		return true;
	},
	
	/*
	 * function: Modulex.Display.updateModelTableHead()
	 * -
	 * What: 
	 * When: 
	 * Why: 
	 */
	 
	updateModelTableHead: function() {
	
		/* Set Category title */
		if(gModulexCurrentCategory) {
			Try.these(
			    function() { $("categoryTitle").innerHTML = gModulexCategoryArray[gModulexCurrentCategory]; },
			    function() { $("categoryTitle").textContent = gModulexCategoryArray[gModulexCurrentCategory]; }
			);
		} else {
			Try.these(
			    function() { $("categoryTitle").innerHTML = gModulexLocalVar_allModels; },
			    function() { $("categoryTitle").textContent = gModulexLocalVar_allModels; }
			);
		}
		
		/* Empty "pagination" element */
		while ($("paginationTop").firstChild) {
		  $("paginationTop").removeChild($("paginationTop").firstChild);
		}
		while ($("paginationBottom").firstChild) {
		  $("paginationBottom").removeChild($("paginationBottom").firstChild);
		}
		
		var ul = Builder.node('ul');
		var ul_copy = Builder.node('ul');
		
		/* Pagination */
		var count = 0;
		var i = 0;
		var length = gModulexModelArray_runtime.length/gModulexModelDisplayCount;
		
		do {
			
			/* Build element */
			var li = Builder.node('li');
			var li_copy = Builder.node('li');
			
			if(gModulexModelDisplayCount_start == count) {
				var a = Builder.node('a', {href: 'javascript:void(0);', className: 'selected'}, i<9 ? "0"+(i+1) : i+1);
				var a_copy = Builder.node('a', {href: 'javascript:void(0);', className: 'selected'}, i<9 ? "0"+(i+1) : i+1);
			} else {
				var a = Builder.node('a', {href: 'javascript:void(0);'}, i<9 ? "0"+(i+1) : i+1);
				var a_copy = Builder.node('a', {href: 'javascript:void(0);'}, i<9 ? "0"+(i+1) : i+1);
			}
			
			/* Set starting and ending variables */
			$(a).modelDisplayCount_start = count;
			$(a_copy).modelDisplayCount_start = count;
			
			count = count+gModulexModelDisplayCount;
			
			if(count<gModulexModelArray_runtime.length) {
				$(a).modelDisplayCount_end = count;
				$(a_copy).modelDisplayCount_end = count;
			} else {
				$(a).modelDisplayCount_end = gModulexModelArray_runtime.length;
				$(a_copy).modelDisplayCount_end = gModulexModelArray_runtime.length;
			}

			/* onclick handler */
			$(a).observe('click', function(event) {
			
				gModulexModelDisplayCount_start = Event.element(event).modelDisplayCount_start;
				gModulexModelDisplayCount_end = Event.element(event).modelDisplayCount_end;
				
				/* Update list */
				Modulex.Display.updateModelTableHead();
				Modulex.Display.updateModelList();
			}, false);
			$(a_copy).observe('click', function(event) {
			
				gModulexModelDisplayCount_start = Event.element(event).modelDisplayCount_start;
				gModulexModelDisplayCount_end = Event.element(event).modelDisplayCount_end;
				
				/* Update list */
				Modulex.Display.updateModelTableHead();
				Modulex.Display.updateModelList();
			}, false);
			
			$(li).appendChild(a);
			$(li_copy).appendChild(a_copy);
			$(ul).appendChild(li);
			$(ul_copy).appendChild(li_copy);
			
			i++;
		} while(i<length);
		
		$("paginationTop").appendChild(ul);
		$("paginationBottom").appendChild(ul_copy);
	
		/* Empty content if exist */
		while ($("modelList").firstChild) {
		  $("modelList").removeChild($("modelList").firstChild);
		}
		
		var modelListHead;
		var modelListRow;
		var modelListBox;
		
		/* Create modelListHead and modelListRow tags */
		modelListHead = Builder.node('div', {id: "modelListHead"});
		modelListRow = Builder.node('div', {className: 'modelListRow'});
		
		/* Col1 */
		modelListBox = Builder.node('div', {className: 'col1'}, gModulexLocalVar_sortBy);
		$(modelListRow).appendChild(modelListBox);
		
		/* Col2 */
		if(gModulexCurrentSorting == "ByName") {
			modelListBox = Builder.node('div', {className: 'col2'}, [
				Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByName();', className: 'selected'}, gModulexLocalVar_modelName)
			]);
		} else if(gModulexCurrentSorting == "ByNameDesc") {
			modelListBox = Builder.node('div', {className: 'col2'}, [
				Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByName();', className: 'selected'}, gModulexLocalVar_modelName)
			]);
		} else {
			modelListBox = Builder.node('div', {className: 'col2'}, [
				Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByName();'}, gModulexLocalVar_modelName)
			]);
		}
		$(modelListRow).appendChild(modelListBox);
		
		/* Col3 */
		if(currentRegion == 'europe') {
			if(gModulexCurrentSorting == "ByRoomNumber") {
				modelListBox = Builder.node('div', {className: 'col3', style: 'width:121px;'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByRoomNumber();', className: 'selected'}, gModulexLocalVar_room)
				]);
			} else if(gModulexCurrentSorting == "ByRoomNumberDesc") {
				modelListBox = Builder.node('div', {className: 'col3', style: 'width:121px;'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByRoomNumber();', className: 'selected'}, gModulexLocalVar_room)
				]);
			} else {
				modelListBox = Builder.node('div', {className: 'col3', style: 'width:121px;'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByRoomNumber();'}, gModulexLocalVar_room)
				]);
			}
			$(modelListRow).appendChild(modelListBox);
		}else{
			if(gModulexCurrentSorting == "ByRoomNumber") {
				modelListBox = Builder.node('div', {className: 'col3'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByRoomNumber();', className: 'selected'}, gModulexLocalVar_room)
				]);
			} else if(gModulexCurrentSorting == "ByRoomNumberDesc") {
				modelListBox = Builder.node('div', {className: 'col3'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByRoomNumber();', className: 'selected'}, gModulexLocalVar_room)
				]);
			} else {
				modelListBox = Builder.node('div', {className: 'col3'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByRoomNumber();'}, gModulexLocalVar_room)
				]);
			}
			$(modelListRow).appendChild(modelListBox);
		}
		
		/* Col4 */
		if(currentRegion == 'europe') {
			if(gModulexCurrentSorting == "BySurface") {
				modelListBox = Builder.node('div', {className: 'col4', style: 'width:121px;'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsBySurface();', className: 'selected'}, gModulexLocalVar_surface)
				]);
			} else if(gModulexCurrentSorting == "BySurfaceDesc") {
				modelListBox = Builder.node('div', {className: 'col4', style: 'width:121px;'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsBySurface();', className: 'selected'}, gModulexLocalVar_surface)
				]);
			} else {
				modelListBox = Builder.node('div', {className: 'col4', style: 'width:121px;'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsBySurface();'}, gModulexLocalVar_surface)
				]);
			}
			$(modelListRow).appendChild(modelListBox);
		}else{
			if(gModulexCurrentSorting == "BySurface") {
				modelListBox = Builder.node('div', {className: 'col4'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsBySurface();', className: 'selected'}, gModulexLocalVar_surface)
				]);
			} else if(gModulexCurrentSorting == "BySurfaceDesc") {
				modelListBox = Builder.node('div', {className: 'col4'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsBySurface();', className: 'selected'}, gModulexLocalVar_surface)
				]);
			} else {
				modelListBox = Builder.node('div', {className: 'col4'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsBySurface();'}, gModulexLocalVar_surface)
				]);
			}
			$(modelListRow).appendChild(modelListBox);
		}
		/* Col5 */
		if(currentRegion == 'europe') {
			if(gModulexCurrentSorting == "ByPriceRange") {
				modelListBox = Builder.node('div', {className: 'col5', style: 'display:none;'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByPriceRange();', className: 'selected'}, gModulexLocalVar_price)
				]);
			} else if(gModulexCurrentSorting == "ByPriceRangeDesc") {
				modelListBox = Builder.node('div', {className: 'col5', style: 'display:none;'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByPriceRange();', className: 'selected'}, gModulexLocalVar_price)
				]);
			} else {
				modelListBox = Builder.node('div', {className: 'col5', style: 'display:none;'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByPriceRange();'}, gModulexLocalVar_price)
				]);
			}
			$(modelListRow).appendChild(modelListBox);
		}else{
			if(gModulexCurrentSorting == "ByPriceRange") {
				modelListBox = Builder.node('div', {className: 'col5'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByPriceRange();', className: 'selected'}, gModulexLocalVar_price)
				]);
			} else if(gModulexCurrentSorting == "ByPriceRangeDesc") {
				modelListBox = Builder.node('div', {className: 'col5'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByPriceRange();', className: 'selected'}, gModulexLocalVar_price)
				]);
			} else {
				modelListBox = Builder.node('div', {className: 'col5'}, [
					Builder.node('a', {href: 'javascript:void(0);', onclick: 'Modulex.Actions.sortModelsByPriceRange();'}, gModulexLocalVar_price)
				]);
			}
			$(modelListRow).appendChild(modelListBox);
		}
		$(modelListHead).appendChild(modelListRow);
		$("modelList").appendChild(modelListHead);
		
		return true;
	},
	
	/*
	 * function: Modulex.Display.updateModelList()
	 * -
	 * What: 
	 * When: 
	 * Why: 
	 */
	 
	updateModelList: function() {
	
		var parsedArray = gModulexModelArray_runtime;
	
		//TODO: updateModelTableHead() already doing this, what to do ??
		/* Empty content if exist */
		/*while ($("modelList").firstChild) {
		  $("modelList").removeChild($("modelList").firstChild);
		}*/
		
		var modelListBody;
		var modelListRow;
		var modelListFullRow;
		var td;
		
		/* Create tbody tag */
		modelListBody = Builder.node('div', {id: 'modelListBody'});
		$("modelList").appendChild(modelListBody);
		
		
		//var randomVar = Math.random();
		
		
		/* Display each 10 selected models */
		for(var i=gModulexModelDisplayCount_start;i<gModulexModelDisplayCount_end;i++) {
		
			if(parsedArray[i] != undefined) {

				/* Main row */
				
				/* Image */
				var imageSrc = parsedArray[i].mainThumbnail.url;
				var imageElement = Builder.node('img', {alt: parsedArray[i].name, src: imageSrc, id: 'image'+i});
				$(imageElement).setStyle({opacity: '0.5'});
				
				/* Name */
				if(parsedArray[i].category.inArray("1")) {
					var nameNode = Builder.node('div', {className: 'col2'}, [Builder.node('div', [
						parsedArray[i].name,
						Builder.node('br'),
						Builder.node('span', {className: 'nouveaute'}, gModulexLocalVar_new),
					])]);
				} else {
					var nameNode = Builder.node('div', {className: 'col2'}, [Builder.node('div', parsedArray[i].name)]);
				}
				
				/* Surface */
				var surfaceRewrite = new Array();
				parsedArray[i].surface.split(/\s*-\s*/).each(function(element) {
					surfaceRewrite.push(element);
					surfaceRewrite.push(Builder.node('br'));
				});
				
				/* PriceRange */
				if(gModulexPriceRangeArray[parsedArray[i].priceRange].thumbnailUrl != undefined) {
					var priceRangeThumbSrc = gModulexPriceRangeArray[parsedArray[i].priceRange].thumbnailUrl;
					var priceRangeElement = Builder.node('img', {alt: parsedArray[i].name, src: priceRangeThumbSrc});
				} else {
					var priceRangeElement = Builder.node('strong', gModulexPriceRangeArray[parsedArray[i].priceRange].name);
				}
				if(currentRegion == 'europe') {
					modelListRow = Builder.node('div', {className: 'modelListRow'}, [
						Builder.node('div', {className: 'col1'}, [imageElement]),
						nameNode,
						Builder.node('div', {className: 'col3', style: 'width:121px;'}, [Builder.node('div', parsedArray[i].roomNumber)]),
						Builder.node('div', {className: 'col4', style: 'width:121px;'}, [Builder.node('div', surfaceRewrite)]),
						Builder.node('div', {className: 'col5', style: 'display:none;'}, [Builder.node('div', [priceRangeElement])])
					]);
				}else{
					modelListRow = Builder.node('div', {className: 'modelListRow'}, [
						Builder.node('div', {className: 'col1'}, [imageElement]),
						nameNode,
						Builder.node('div', {className: 'col3'}, [Builder.node('div', parsedArray[i].roomNumber)]),
						Builder.node('div', {className: 'col4'}, [Builder.node('div', surfaceRewrite)]),
						Builder.node('div', {className: 'col5'}, [Builder.node('div', [priceRangeElement])])
					]);
				}
				//$(modelListRow).hide();
				
				$(modelListBody).appendChild(modelListRow);
				
				//$(imageElement).setAttribute("src", imageSrc);
				/* Fancy display
				Effect.Appear(modelListRow, {
					duration: gModulexDisplayConfig.speed,
					queue: 'end',
					beforeStart: function(effect) {
						effect.element.hide();
						$(modelListBody).appendChild(effect.element);
					}
				}); */
				
				/*new Effect.toggle(modelListRow, 'appear', {
						duration: gModulexDisplayConfig.speed,
						//queue: {position: 'end', scope: 'scope'+i}
						queue: 'end'
				});*/
				
				/* Image Opacity onmouseover */
				$(modelListRow).observe('mouseover', function(event) {
					
					var currentElement;
					var count = 0;
					var initialElement = Event.element(event);
					
					while(currentElement == undefined) {
						if(initialElement.className == "modelListRow") {
							currentElement = initialElement;
						} else {
							initialElement = initialElement.parentNode;
						}
						if(count > 5) {
							break;
						}
						count++;
					}

					if(currentElement.id != "modelListRowSelected") {
					
						/* Image fade in */
						/*new Effect.Opacity(currentElement.getElementsByTagName("img")[0], {
							duration: gModulexDisplayConfig.alphaSpeed,
							from: 0.5,
							to: 1
						});*/
						currentElement.getElementsByTagName("img")[0].setStyle({opacity: '1'});
						
						/* highlight row */
						currentElement.getElementsByClassName("col2")[0].setStyle({backgroundColor: '#373737'});
						currentElement.getElementsByClassName("col3")[0].setStyle({backgroundColor: '#373737'});
						currentElement.getElementsByClassName("col4")[0].setStyle({backgroundColor: '#373737'});
						currentElement.getElementsByClassName("col5")[0].setStyle({backgroundColor: '#373737'});
						
					}
					
				}, false);
				
				/* Image Opacity onmouseout */
				$(modelListRow).observe('mouseout', function(event) {
					
					var currentElement;
					var count = 0;
					var initialElement = Event.element(event);
					
					while(currentElement == undefined) {
						if(initialElement.className == "modelListRow") {
							currentElement = initialElement;
						} else {
							initialElement = initialElement.parentNode;
						}
						if(count > 5) {
							break;
						}
						count++;
					}
					
					if(currentElement.id != "modelListRowSelected") {
						
						/* Image fade out */
						/*new Effect.Opacity(currentElement.getElementsByTagName("img")[0], {
							duration: gModulexDisplayConfig.alphaSpeed,
							from: 1,
							to: 0.5
						});*/
						currentElement.getElementsByTagName("img")[0].setStyle({opacity: '0.5'});
						
						/* unhighlight row */
						currentElement.getElementsByClassName("col2")[0].setStyle({backgroundColor: 'transparent'});
						currentElement.getElementsByClassName("col3")[0].setStyle({backgroundColor: 'transparent'});
						currentElement.getElementsByClassName("col4")[0].setStyle({backgroundColor: 'transparent'});
						currentElement.getElementsByClassName("col5")[0].setStyle({backgroundColor: 'transparent'});
					}
					
					
				}, false);
				
				/* SlideDown effect on nextSibbling */
				$(modelListRow).observe('click', function(event) {
	
					var currentElement;
					var count = 0;
					var initialElement = Event.element(event);
					
					while(currentElement == undefined) {
						if(initialElement.className == "modelListRow") {
							currentElement = initialElement;
						} else {
							initialElement = initialElement.parentNode;
						}
						if(count > 5) {
							break;
						}
						count++;
					}
					
					/* Do nothing if id already "modelListRowSelected" */
					if(currentElement.id != "modelListRowSelected") {
					
						/* UnHighlight selected row */
						if(eval($("modelListRowSelected"))) {
							$("modelListRowSelected").getElementsByTagName("img")[0].setStyle({opacity: '0.5'});
							$("modelListRowSelected").removeAttribute("id");
						}
						
						/* Hide every fullRow element not previously hidden */
						$A($("modelList").getElementsByClassName("modelListFullRow")).each(function(element) {
						
							if(element.visible()) {
								
								new Effect.toggle(element, 'blind', {
									duration: gModulexDisplayConfig.speed,
									queue: 'front'
								});
								
								/* unhighlight row */
								element.previous().getElementsByClassName("col2")[0].setStyle({backgroundColor: 'transparent'});
								element.previous().getElementsByClassName("col3")[0].setStyle({backgroundColor: 'transparent'});
								element.previous().getElementsByClassName("col4")[0].setStyle({backgroundColor: 'transparent'});
								element.previous().getElementsByClassName("col5")[0].setStyle({backgroundColor: 'transparent'});
								
							}
							
						});
						
						/* Highlight row */
						currentElement.setAttribute("id", "modelListRowSelected");
						
						new Effect.toggle(currentElement.next(), 'blind', {
							duration: gModulexDisplayConfig.speed,
							queue: 'end'
						});
					}
					
				}, false);
				
				modelListFullRow = Builder.node('div', {className: 'modelListFullRow'});
				
				/* Hide fullRow */
				$(modelListFullRow).hide();
				
				var blockquote = Builder.node('blockquote', {className: 'close'});
				var button = Builder.node('button', {className: 'close'}, gModulexLocalVar_close);
				
				$(button).observe('click', function(event) {
					
					var currentElement = Event.element(event).parentNode.parentNode;
					
					new Effect.toggle(currentElement, 'blind', {
						duration: gModulexDisplayConfig.speed
					});
					
					/* reset previous element id */
					currentElement.previous().removeAttribute("id");
					/* unhighlight row */
					currentElement.previous().getElementsByClassName("col2")[0].setStyle({backgroundColor: 'transparent'});
					currentElement.previous().getElementsByClassName("col3")[0].setStyle({backgroundColor: 'transparent'});
					currentElement.previous().getElementsByClassName("col4")[0].setStyle({backgroundColor: 'transparent'});
					currentElement.previous().getElementsByClassName("col5")[0].setStyle({backgroundColor: 'transparent'});
					
					/* Reset image opacity */
					currentElement.previous().getElementsByTagName("img")[0].setStyle({opacity: '0.5'});
					
				}, false);
				
				$(blockquote).appendChild(button);
	
				var h2 = Builder.node('h2', parsedArray[i].name);
				var p = Builder.node('p', parsedArray[i].description);
				
				$(modelListFullRow).appendChild(blockquote);
				$(modelListFullRow).appendChild(h2);
				$(modelListFullRow).appendChild(p);
				
				/* Display preview thumbnail */
				for(var y=0;y<parsedArray[i].images.length;y++) {
					if(parsedArray[i].images[y]) {
						var img = Builder.node('img', {alt: parsedArray[i].name, src: parsedArray[i].images[y].thumbnailUrl});
						img.imageElement = Builder.node('img', {alt: parsedArray[i].name, src: parsedArray[i].images[y].url});
						
						
						$(modelListFullRow).appendChild(img);
						
						/* onclickevent */
						$(img).observe('click', function(event) {
						
							//var imageElement = Builder.node('img', {alt: parsedArray[i].name, src: parsedArray[i].images[y].url});
							Modulex.Display.showModalBox(Event.element(event).imageElement);
						}, false);
					}
				}
				
				/* Add clearing BR tag after images */
				var br = Builder.node('br', {className: 'clearboth'});
				$(modelListFullRow).appendChild(br);
				
				/* TechnicalSheet PDF file */
				if(parsedArray[i].technicalSheet.url) {
					var span = Builder.node('span', {className: 'pdf'}, [
						Builder.node('a', {title: gModulexLocalVar_technicalSheet, href: parsedArray[i].technicalSheet.url, target: '_blank'}, gModulexLocalVar_technicalSheet),
					]);
					$(modelListFullRow).appendChild(span);
				}
				
				if(parsedArray[i].slideshow.url) {
					
					var spanfile = Builder.node('span', {className: 'file'}, [
						Builder.node('a', {
							title: gModulexLocalVar_technicalSheetFile, 
							href: 'javascript:;',
							onclick: "openlink('"+parsedArray[i].slideshow.url+"')"
						},
						gModulexLocalVar_technicalSheetFile),
					]);
					
					$(modelListFullRow).appendChild(spanfile);

					
				}
				
				$(modelListBody).appendChild(modelListFullRow);
				
			}
		}
		
		/* Prevent IE6 caching bug */
		if(/MSIE/.test(navigator.userAgent) && !window.opera) {
		
			var reloadIETimeout = setTimeout( function() {
		
				for(var i=gModulexModelDisplayCount_start;i<gModulexModelDisplayCount_end;i++) {
					if(parsedArray[i] != undefined) {
						$('image'+i).setAttribute("src", parsedArray[i].mainThumbnail.url);
					}
				}
			}, 1000);
		}
		
		/* Empty priceRange legend content if exist */
		while ($("priceRangeLegend").firstChild) {
		  $("priceRangeLegend").removeChild($("priceRangeLegend").firstChild);
		}
		
		/* Creates priceRange legend */
		var h5;
		var ul;
		var li;
		
		/* priceRange legend title */
		h5 = Builder.node('h5', gModulexLocalVar_priceRangeLegend);
		$("priceRangeLegend").appendChild(h5);
		
		/* Creating UL tag */
		ul = Builder.node('ul');
		$("priceRangeLegend").appendChild(ul);
		
		/* Parsing each priceRange node */
		for(var i=0;i<gModulexPriceRangeArray.length;i++) {
			
			if(gModulexPriceRangeArray[i] != undefined) {
			
				if(gModulexPriceRangeArray[i].thumbnailUrl != undefined) {
					
					var priceRangeElement = 'background: right no-repeat '+gModulexPriceRangeArray[i].thumbnailUrl+';';
					li = Builder.node('li', {style: priceRangeElement}, [gModulexPriceRangeArray[i].name]);
					
					Element.setStyle(li, {
						backgroundImage: 'url('+gModulexPriceRangeArray[i].thumbnailUrl+')',
						backgroundPosition: 'center right',
						backgroundRepeat: 'no-repeat'
					});
					
				}
				
				
				$(ul).appendChild(li);
			
			}
		}
		
		return true;
	},
	
	/*
	 * function: Modulex.Display.showModalBox(element)
	 * -
	 * What: 
	 * When: 
	 * Why: 
	 */
	 
	showModalBox: function(element) {
		
		var element = $(element);
		
		/* Modal background */
		var div = Builder.node('div', {id: 'modalBox'});
		$(div).hide();
		
		document.body.appendChild(div);
		
		/* Content wrapper */
		var div = Builder.node('div', {id: 'modalContent'});
		$(div).hide();
		
		document.body.appendChild(div);
		
		/* Close button */
		var blockquote = Builder.node('blockquote', {className: 'close'});
		var button = Builder.node('button', {className: 'close'}, gModulexLocalVar_close);
		
		$(button).observe('click', function(event) {
			
			document.body.removeChild($("modalContent"));
			document.body.removeChild($("modalBox"));
			
			/* IE hack */
			if(/MSIE/.test(navigator.userAgent) && !/MSIE 7/.test(navigator.userAgent) && !window.opera) {
				Element.setStyle(document.body, {
					overflow: 'auto'
				});
			}
					
		}, false);
				
		$(blockquote).appendChild(button);
		$(div).appendChild(blockquote);
		
		/* Append image to container */
		$(div).appendChild(element);
		
		if(typeof(window.innerWidth) == "number" ) {
			var windowDimensions = {
				width: window.innerWidth,
				height: window.innerHeight
			};
		} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
			var windowDimensions = {
				width: document.documentElement.clientWidth,
				height: document.documentElement.clientHeight
			};
		} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
			var windowDimensions = {
				width: document.body.clientWidth,
				height: document.body.clientHeight
			};
		}
		
		var elementDimensions = Element.getDimensions($("modalContent"));
		
		var scrollPosition = {
			left: Position.realOffset($("modalContent"))[0],
			top: Position.realOffset($("modalContent"))[1]
		};

		new Effect.Appear($("modalContent"), {
			duration: gModulexDisplayConfig.speed,
			beforeStart: function(effect) {
				
				/* Test if position is negative */
				var topPosition = scrollPosition.top+(windowDimensions.height/2)-(elementDimensions.height/2);
				var leftPosition = scrollPosition.left+(windowDimensions.width/2)-(elementDimensions.width/2);
				if(topPosition <= 0) {
					Element.setStyle(effect.element, {
						overflow: 'scroll',
						top: scrollPosition.top+"px",
						left: scrollPosition.left+"px",
						height: windowDimensions.height-30+"px"
					});
				} else {
					Element.setStyle(effect.element, {
						top: topPosition+"px",
						left: leftPosition+"px"
					});
				}
				/* Setting */
				Element.setStyle(element, {left: (windowDimensions.width/2)-(elementDimensions.width/2)+"px"});
			//},
			//afterFinish: function(effect) {
		
				Element.setStyle($("modalBox"), {
					width: 100+"%",
					height: windowDimensions.height+"px"
				});
				
				/* IE: disable scrollbar because of "position: fixed" bug */
				if(/MSIE/.test(navigator.userAgent) && !/MSIE 7/.test(navigator.userAgent) && !window.opera) {

					Element.setStyle($("modalBox"), {
						top: scrollPosition.top
					});

					Element.setStyle(document.body, {
						overflow: 'hidden'
					});
				}
				
				/* Show modal-cache div */
				$("modalBox").show();
				
				if(element.getAttribute('id') == 'flashReplace') swfobject.embedSWF(element.getAttribute('alt'), "flashReplace", "550", "450", "8.0.0");
								
			}
		});
		
		return true;
	}
}

function openlink(linkme) {
	
	var imageElement = Builder.node('img', {id:'flashReplace', height:450, width:550, alt: linkme, src: 'img/dummyflash.jpg'});
	Modulex.Display.showModalBox(imageElement);
	
}