var siverObj=null;
var goldObj=null;
var platObj=null;
var silverBtn=null;
var goldBtn=null;
var platinumBtn=null;
var currentlySelected=null;
var iconDiv=null;
var infoDiv=null;
var detailDiv=null;
var option=null;
var myReqObj=null;
var rootFolder;

window.onload=function(){
		rootFolder = document.getElementById('var').innerHTML;
		
		silverBtn =  document.getElementById('mm1');
		silverBtn.onclick = populate;
		
		optionDiv=document.getElementById('options');
		//var icon = document.getElementById('cabinet_stylelist');
		detailDiv = document.getElementById('photo');
		infoDiv = document.getElementById('information');
		iconDiv =  document.getElementById("stylelist");
		
		goldBtn =  document.getElementById('mm2');
		goldBtn.onclick = populate;
		
		
		platinumBtn =  document.getElementById('mm3');
		platinumBtn.onclick = populate;
		
		welbornBtn =  document.getElementById('mm4');
		welbornBtn.onclick = populate;
		
		
		getInfo('../folderParser.php', silverBtn.innerHTML);
		
		
	
	currentlySelected = document.getElementById('mm1').id;
	document.getElementById('mm1').id = 'current_page2';
	
}

function getInfo(page, folder){
	
	new Ajax.Request(page,
										{
										method 	   : 'post',
										parameters : ('folder='+folder+'&rootFolder='+rootFolder),
										onComplete : function(ajaxObj){
											if(page == '../folderParser.php'){
												eval('myReqObj = '+ ajaxObj.responseText);	
												populatePage(null);
											}else{
												infoDiv.innerHTML = ajaxObj.responseText;
											}
											
											
										}
										});	
}

function populatePage(source){
	var iconContent;
	var src=0;
	var styleName ='';
	
	if(source!=null){
		
		
		src = source;
		
		 
	}
	
	
	getInfo(myReqObj.folder[src].path+'/info.html', 'null');
	
	
	iconContent = '<p> <strong>Click on one of the thumbnails below to see additional information about these products.</strong>';
	 //alert(getInfo);
	
	for(i=0; i < myReqObj.folder.length; i++){
		if(i==source){
		 	styleName = 'id="active"';
		}else if(i==0 && source==null){
			styleName = 'id="active"';
		}else{
			styleName ='';
		}
		
		
		 iconContent += '<a href="#" onclick="getProduct(\''+myReqObj.folder[i].name+'\')"><img ' + styleName +' src="'+myReqObj.folder[i].path+'/icon.jpg" alt="'+myReqObj.folder[i].name+'" border="0"></a>';
	}
	 iconContent += '</p>';
	iconDiv.innerHTML = iconContent;
	
	detailDiv.innerHTML = '<h1><img src="'+myReqObj.folder[src].path+'/detail.jpg" alt="'+myReqObj.folder[src].name+'" border="0"></h1>';
	optionDiv.innerHTML = '<h1></h1><p><img src="'+myReqObj.folder[src].path+'/options.jpg" alt="'+myReqObj.folder[src].name+'" border="0"></p>';
}

function getProduct(prod){
	for(i=0; i<myReqObj.folder.length; i++){
		if(	myReqObj.folder[i].name == prod){
			
			//alert('found in '+ i +' ' + prod);
			populatePage(i);
			break;
		}
	}
	
}
var currentlySelectedId=null;
function populate(event){
	var trigger = this.innerHTML;
	if(currentlySelected!=null){
		document.getElementById('current_page2').id = currentlySelected;
	
	}
	currentlySelected = this.id;
	this.id =  'current_page2';
	
	getInfo('../folderParser.php', trigger);
	//event.target.id =  'current_page2';

}