var paramsName = [];
var pageName = [];
function getAddress()
{
	var fullPath = window.location.pathname;
	for( var i = 1; i<=fullPath.length; i++){
		var  oneChar = fullPath.charAt(fullPath.length-i);
		if (oneChar == "\/" || oneChar == "\\"){
			pageName =  fullPath.substr(fullPath.length-i+1);
			break;
		}
	}

	var fullSearch 	= unescape( document.location.search.substr(1) );
	
	if( !fullSearch && pageName == 'instructions.html' )
	{
		document.location.href='instructions.html?topic=commercial&name=2x12&mode=simple';
	}

	if(fullSearch)
	{
		var allParams 	= fullSearch.split('&');
		var paramsArray = [];
	
		for(var i=0; i<allParams.length; i++){
			paramsArray[i]	= allParams[i].split('=');
			paramsName[i]	= paramsArray[i][0];

			switch( paramsArray[i][0] )
			{
				case 'topic':
								params.topic = paramsArray[i][1];
								break;
				case 'name':
								params.name = paramsArray[i][1];//?String(paramsArray[i][1]).replace(/[_]+$/gi,""):paramsArray[i][1];
								break;
				case 'mode':
								params.mode = paramsArray[i][1];
								break;
			}
		}
		isParamsCorrect();		
	}
}

/*
 * -----------------------------------------------------------------
 * Check parameters.
 * Their names should be into params-object.
 * Their values should be into products-object.
 * -----------------------------------------------------------------
*/
function isParamsCorrect()
{
	var flag = '';
	for(var i=0; i<paramsName.length; i++){

		switch(paramsName[i])
		{
			case 'topic':
							for(var prop in products)
							{
								if(prop == params['topic'])
									flag = '1';
							}
							break;
			case 'name':
							if ( flag == '1' )
							{
								var object = products[ params['topic'] ][1];
								for( var propObj in object )
								{
									if(propObj == ('name_' + params['name']) )
										flag += '1';
								}
							}
							break;
			case 'mode':
							if( flag == '11' )
							{
								for(var prop in modes)
								{
									if(prop == params['mode'])
										flag += '1';
								}
							}
							break;
		}
	}
// TO DO: uncomment document.location.href="404.html"
	if( flag != '111' ){
		document.location.replace("404.html");			
	}
}

function createFrame(){
//	for example: content/products/commercial/simple/3x58.html
	//var frame = 'content/products/' + params.topic + '/' + params.name + '.html';
	var instr = product_instructions[ params.topic ][1][ 'name_' + params.name ];
	var frame = 'content/instructions/' + instr + '.html';
	window.frames.iframe.location.href = frame;
}

/*
 * -----------------------------------------------------------------
 * Creates list of products and show sublist of current - ?topic=...
 * -----------------------------------------------------------------
*/
function generateSimpleBox(drawings){
	var out = '';

	out += '<table width="215" border="0" cellspacing="0" cellpadding="0" class="boxBg">\n';
	out += '<tr>\n';
	out += '	<td valign="top" width="12" height="14"><img src="img/box_bg_corner_left_top.gif" width="12" height="14"></td>\n';
	out += '	<td class="boxBgTop" width="100%"><img src="img/spacer.gif" width="1" height="1"></td>\n';
	out += '	<td valign="top" width="8" height="14"><img src="img/box_bg_corner_right_top.gif" width="8" height="14"></td>\n';
	out += '</tr>\n';
	out += '<tr>\n';
	out += '	<td class="boxBgLeft" width="12" style="background-image: url(img/box_bg_corner_left.gif)"><img src="img/spacer.gif" width="12" height="1"></td>\n';
	out += '	<td class="boxBgContent" valign="top">\n';
	out += '		<!-- == Box ================== -->\n';
	out += '		<ul class="boxList">\n';

	for (var prop in products)
	{
		var mode = 'simple';
		if(drawings && products[prop][0] != 'Products'){
			mode = 'detailed';
			continue;
		} else if(!drawings && products[prop][0] == 'Products') {
			continue;
		}
		if(drawings){
			mode = 'detailed';
		}
		if (params.mode=="sectional")
			mode = "sectional";
		var header = products[prop][0];
		var items  = products[prop][1];
		out += '		<li class="head">\n';
		out += '		<div onClick="showList(this)" class="boxHeader"><b>' + header + '</b></div>\n';
		out += ( (prop == params.topic) || (prop == 'drawings'))
							?'<ul>\n'
							:'<ul style="display:none">\n';

		for( var propItems in items){
			var  label	= items[propItems];
			var  url	= 'instructions.html?topic=' + prop + '&name=' + propItems.replace('name_','') + '&mode='+mode;
			out += '			<li><a href="' + url + '">' + label + '</a></li>';
		}

		out += '			</ul>';
		out += '		</li>';
	}
	out += '		</ul>';
	out += '		<!-- = /Box ================== -->';
	out += '	</td>';
	out += '	<td class="boxBgRight" width="8" style="background-image: url(img/box_bg_corner_right.gif)"><img src="img/spacer.gif"  height="1"></td>';
	out += '</tr>';
	out += '<tr>';
	out += '	<td valign="top" width="12" height="8"><img src="img/box_bg_corner_left_bottom.gif" width="12" height="8"></td>';
	out += '	<td class="boxBgBottom"><img src="img/spacer.gif" width="1" height="1"></td>';
	out += '	<td valign="top" width="8" height="8"><img src="img/box_bg_corner_right_bottom.gif" width="8" height="8"></td>';
	out += '</tr>';
	out += '</table>';
	document.getElementById('jsBoxMenu').innerHTML = out;
	document.getElementById('pageTitle').innerHTML = (params.mode=="sectional"?products[ params.topic ][1][ 'name_' + params.name ]+" – Sectional View":"Instructions");
}

/*
 * -----------------------------------------------------------------
 * Shows and hides list of products
 * -----------------------------------------------------------------
*/
function showList(el){
	while (el.nodeName.toUpperCase() != 'UL') {
		el = el.nextSibling;
	}
	var list = el;
	list.style.display = (list.style.display == 'none') ? 'block' : 'none' ;
}

function generateSimpleLinks()
{
	//document.getElementById('rightTD').width = 242;
	for( var prop in modes)
	{
		if(prop != 'simple')
		{
			var linkName = 'jsLink' + prop.substr(0,1).toUpperCase() + prop.substr(1);
			var  url = 'instructions.html?topic=' + params.topic + '&name=' + params.name + '&mode=';
			
			document.getElementById( linkName ).href = url + prop;
		}
	}
	//document.getElementById('jsLinksTableSimple').style.display = 'block';

//	files/products/commercial/3x58.pdf
	var instr = product_instructions[ params.topic ][1][ 'name_' + params.name ];
	var pdfSrc = 'files/instructions/instructions.pdf';
	var pdfCartoonSrc = '#';
	document.getElementById('jsLinkPdf').href = pdfSrc;
	document.getElementById('jsLinkPdf').target = '_blank';

	if ((instr=="flex_c_trac_plate" && params.name!='2x4' && params.name!='2x4') || instr=="flex_lite")
	{
		pdfCartoonSrc = 'files/instructions/cartoontracold.pdf';
	}

	if (instr=="flex_c_trac_plate" && params.name=='2x4' && params.name=='2x4')
	{
		pdfCartoonSrc = 'files/instructions/cartoonplateold.pdf';
	}


	if ((params.name=='2x12' || params.name=='3x58' || params.name=='6_20' || params.name=='angle' || params.name=='angle_1_18'))
	{
		pdfCartoonSrc = 'files/instructions/cartoontrac.pdf';
	}else
		document.getElementById('tdLinkPdf').style.display = "none";

	if (pdfCartoonSrc!="#")
	{
		document.getElementById('jsLinkCartoon').href = pdfCartoonSrc;
		document.getElementById('jsLinkCartoon').target = '_blank';
	}else{
		document.getElementById('tdLinkCartoon').style.display = "none";
	}

	document.getElementById('jsLinkInstructions').href 	= 'instructions.html';
	document.getElementById('jsLinkArchitectural').href = 'specifications.html';

	/*if(params.topic == 'deflection'){
		document.getElementById('jsLinkChart').innerHTML = '<b>Spacing Chart</b>';
		document.getElementById('jsLinkChart').href	= 'javascript:window.open("spacing_chart.html","","width=600,height=200,scrollbars=yes"); void(0)';
	} else{
		document.getElementById('jsLinkChart').innerHTML = '<b>Load Chart</b>';
		document.getElementById('jsLinkChart').href	= 'javascript:window.open("load_chart.html","","width=600,height=200,scrollbars=yes"); void(0)';
	}*/

	document.getElementById('jsTdIcons').style.display = 'block';
}

function generateSimpleImage3d()
{
//	img/products/commercial/3d/3x58.jpg
	var imageSrc = 'img/products/' + params.topic + '/3d/' + params.name + '.gif'; //+ extention_3d;
	document.getElementById('jsImage3d').innerHTML = '<img src="' + imageSrc + '" style="display: none" onload="this.style.display=\'block\';">';

}

function generateBackLink()
{
	var url = 'instructions.html?topic=' + params.topic + '&name=' + params.name + '&mode=simple';
	document.getElementById('jsLinkBack').href = 'instructions.html?topic='+params.topic+'&name='+params.name+'&mode=simple';
	document.getElementById('jsLinksTableAdditional').style.display = 'block';
	//document.getElementById('rightTD').width = 123;
	document.getElementById('jsLinksTableSimple').style.display = 'none';
}

function generateAdditionalView()
{
	var header = '<img src="img/spacer.gif" height="10" width="300"/>';//'<div class="contentTextHeader" style="margin-top:50px">' + products[ params.topic ][1][ 'name_' + params.name ] + '</div>';
	var imageSrc = 'img/products/' + params.topic + '/' + params.mode +  '/' + params.name + '.' + extention_sectional;
	document.getElementById('jsContent').innerHTML = header + '<img src="' + imageSrc + '" style="margin-left:5px; display: none;" onload="this.style.display=\'block\';"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>';
}

function SetSubmittalLink(){
	var target_link = document.getElementById('jsLinkDetailedTD');
	var pic         = 'img/products_drawings/' + products_pic[params.topic]['name_'+params.name];
	var html = '<a href="#" onclick="InnerImage(\''+pic+'\')" id="jsLinkDetailed"><b>Product Drawing/Submittal</b></a>';
	
	if(products_pic[params.topic]['name_' + params.name] == '#'){
		html = '<a href="#" id="jsLinkDetailed"><b>Product Drawing/Submittal</b></a>';
	}
	target_link.innerHTML= html;
	//Sectional
	var target_link = document.getElementById('jsLinkSectionalTD');
	var html = '<a href="instructions.html?topic='+params.topic+'&name='+params.name+'&mode=sectional" id="jsLinkSectional"><b>Sectional View</b></a>';
	if(products_pic[params.topic]['name_' + params.name] == '#'){
		html = '<a href="#" id="jsLinkSectional"><b>Sectional View</b></a>';
	}
	target_link.innerHTML= html;
}

function InnerImage(pic){
	document.getElementById('jsContent').innerHTML='<img src="'+ pic +'" alt="" />';
}

getAddress();

function buildOutput()
{
	switch(params['mode'])
	{
		case 'simple'		:
								createFrame();
								generateSimpleBox();
								generateSimpleLinks();
								generateSimpleImage3d();
								break;
		case 'sectional'	:
								generateSimpleBox();
								generateBackLink();
								generateAdditionalView();
								generateSimpleImage3d();
								break;
		case 'detailed'		:
								createFrame();
								generateSimpleLinks();
								generateSimpleBox('drawings');
								generateBackLink();
								generateAdditionalView();
								break;
		case 'chart'		:
								generateBackLink();
								break;
	}
	SetSubmittalLink();
}