// Dummy content for modal window
/*var modalWindowDummyContent = '<form id="contactForm"><table>'
+ '<colgroup>'
+ '<col width="200"/>'
+ '<col width="620"/>'
+ '</colgroup>'
+ '	<tr>'
+ '		<td colspan="2" style="padding:0px;">'
+ '			<h3>Choose your category</h3>'
+ '		</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td>'
+ '			<label for="types">'
+ '				By Types:'
+ '			</label>'
+ '		</td>'
+ '		<td>'
+ '			<div>'
+ '			<input type="checkbox" name="select_all" id="select_all" value="" class="radio" />'
+ '			Select all'
+ '			</div>'
+ '			<div>'
+ '			<input type="checkbox" name="unselect_all" id="unselect_all" value="" class="radio" />'
+ '			Unselect all'
+ '			</div>'
+ '		</td>'
+ '	</tr>'
+ '	<tr class="spacer">'
+ '		<td>&nbsp;</td>'
+ '		<td>'
+ '			<div>'
+ '				<input type="radio" name="types1" id="types1" value="" class="radio" /> Ball Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types2" id="types2" value="" class="radio" /> Air Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types3" id="types3" value="" class="radio" /> Gate Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types4" id="types4" value="" class="radio" /> Ball Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types5" id="types5" value="" class="radio" /> Ball Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types6" id="types6" value="" class="radio" /> Ball Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types7" id="types7" value="" class="radio" /> Ball Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types8" id="types8" value="" class="radio" /> Ball Valves'
+ '			</div>'
+ '		</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td>'
+ '			<label for="materials">'
+ '				By Materials:'
+ '			</label>'
+ '		</td>'
+ '		<td>'
+ '			<div>'
+ '			<input type="checkbox" name="select_all" id="select_all" value="" class="radio" />'
+ '			Select all'
+ '			</div>'
+ '			<div>'
+ '			<input type="checkbox" name="unselect_all" id="unselect_all" value="" class="radio" />'
+ '			Unselect all'
+ '			</div>'
+ '		</td>'
+ '	</tr>'
+ '	<tr class="spacer">'
+ '		<td>&nbsp;</td>'
+ '		<td>'
+ '			<div>'
+ '				<input type="radio" name="types1" id="types1" value="" class="radio" /> Ball Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types2" id="types2" value="" class="radio" /> Air Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types3" id="types3" value="" class="radio" /> Gate Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types4" id="types4" value="" class="radio" /> Ball Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types5" id="types5" value="" class="radio" /> Ball Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types6" id="types6" value="" class="radio" /> Ball Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types7" id="types7" value="" class="radio" /> Ball Valves'
+ '			</div>'
+ '			<div>'
+ '				<input type="radio" name="types8" id="types8" value="" class="radio" /> Ball Valves'
+ '			</div>'
+ '		</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td colspan="2" style="border-top: 1px solid #8c8c8c; padding-left:0px;">'
+ '			<button name="btn_send" type="submit">Save</button>'
+ '			<button class="btnClear" name="btn_clear" type="reset">Clear</button>'
+ '		</td>'
+ '	</tr>'
+ '</table></form>';


*/


var modalWindowLogin = '<form id="signIn" method="post" action="/Login.do"><table class="small_size">'
+ '<colgroup>'
+ '<col width="100"/>'
+ '<col width="150"/>'
+ '<col width="250"/>'
+ '</colgroup>'
+ '	<tr>'
+ '		<td colspan="3">'
+ '			<h3>Login</h3>'
+ '		</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td>'
+ '			<label for="user_id">'
+ '			ID:'
+ '			</label>'
+ '		</td>'
+ '		<td>'
+ '			<input type="text" name="login" value="Your ID" onfocus="checkLoginDefautl(this)" id="user_id"  />'
+ '		</td>'
+ '		<td>'
+ '			<input type="checkbox" name="remember" id="remember" value="true" style="border:none;"/>'
+ '			Remember me on this computer.'
+ '		</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td>'
+ '			<label for="password">'
+ '			Password:'
+ '			</label>'
+ '		</td>'
+ '		<td>'
+ '			<input type="password" name="password" id="password" value="" />'
+ '		</td>'
+ '		<td>'
+ '		<a href="/Forget.do">Forget your ID or password?</a>'
+ '		</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td colspan="3">'
+ '			<button type="submit" name="btn_send">Sign in</button>'
+ '		</td>'
+ '	</tr>'
+ '	</form>'
+ '	<tr>'
+ '		<td colspan="3" style="border-bottom:1px solid #8c8c8c;">'
+ '		&nbsp;'
+ '		</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td colspan="3" style="padding-top:10px;">'
+ '			<h1>Become ValveBiz Pro Today</h1>'
+ '		</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td colspan="3">You are taking advantage of</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td colspan="3"><strong> &nbsp; &nbsp; Priority listing</strong></td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td colspan="3"><strong> &nbsp; &nbsp; Brand awareness</strong></td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td colspan="3"><strong> &nbsp; &nbsp; Large majority of product and inventory displays</strong></td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td colspan="3"><strong> &nbsp; &nbsp; Unlimited sending of enquiries</strong></td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td colspan="3"><strong> &nbsp; &nbsp; Bulk of trade and news postings</strong></td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td colspan="3"><strong> &nbsp; &nbsp; Homepage showoff</strong></td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td colspan="3">... and much more.</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td colspan="3"><a href="/Register.do" class="btn2"  >Sign up now</a></td>'
+ '	</tr>'
+ '</table></form>';







/*
var modalWindowList= '<table id="popupList" class="small_size" cellspacing="0" cellpadding="0" border="0">'
+ '	<tr>'
+ '		<td colspan="5" style="padding:0px;">'
+ '			<h3>List</h3>'
+ '		</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<th align="left">Products</th>'
+ '		<th align="left">Quantity</th>'
+ '		<th align="left">Place of Origin</th>'
+ '		<th align="left">Manufacture Date</th>'
+ '		<th align="left">Condition</th>'
+ '	</tr>'
+ '	<tr>'
+ '		<td>balls</td>'
+ '		<td>22</td>'
+ '		<td>Taiwan</td>'
+ '		<td>Dec 12, 2005</td>'
+ '		<td>New</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td>stems</td>'
+ '		<td>3</td>'
+ '		<td>Taiwan</td>'
+ '		<td>Dec 12, 2005</td>'
+ '		<td>Used</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td>gasket</td>'
+ '		<td>55</td>'
+ '		<td>Taiwan</td>'
+ '		<td>Dec 12, 2005</td>'
+ '		<td>Returns</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td>caps</td>'
+ '		<td>10</td>'
+ '		<td>China</td>'
+ '		<td>Dec 12, 2005</td>'
+ '		<td>New</td>'
+ '	</tr>'
+ '	</table>';
*/





// Prototype representing a modal window.
var ModalWindow = function(contents, width) {
	var targetWidth = width;
	var outerDiv = document.createElement('div');
	outerDiv.className = "modalWindow";

	if (document.getElementById('modalWindow')) {
		document.body.removeChild(document.getElementById('modalWindow'));
	}

	outerDiv.id = "modalWindow";

	var innerDiv = document.createElement('div');
	innerDiv.className = "modalWindowInner";

	var calcPos = function() {
		var _targetWidth = targetWidth;
		if (typeof(_targetWidth) == "undefined" || _targetWidth === null) {
			var _targetWidth = document.documentElement.clientWidth - 40;
			if (_targetWidth > document.getElementById("content").offsetWidth - 100) {
				_targetWidth = document.getElementById("content").offsetWidth - 100;
			}
		}

		var _XPos = document.documentElement.scrollLeft;
		var _YPos = document.documentElement.scrollTop;

		outerDiv.style.width = _targetWidth + 'px';
		innerDiv.style.width = _targetWidth - 40 + 'px';

		var _top = _YPos + (document.documentElement.clientHeight - outerDiv.offsetHeight) / 2;
		var _left = _XPos + (document.documentElement.clientWidth - _targetWidth) / 2;
                var clientHeight = document.body.clientHeight;
                var clientWidth  = document.body.clientWidth;
//		outerDiv.style.top = (clientHeight)/5 + 'px';
		outerDiv.style.top = "140px" ;
                outerDiv.style.left = ((clientWidth)/2-(targetWidth/2)) +'px'
	}

	window.onscroll = calcPos;
	window.onresize = calcPos;

	var closeLink = document.createElement("a");
	closeLink.title = "close";
	closeLink.appendChild(document.createTextNode("\u00d7"));
	closeLink.className = "modalWindowClose";
	closeLink.onclick = function() {
	document.body.removeChild(outerDiv);
		/*@cc_on
			@if (@_jscript_version < 5.7)
				var selects = document.getElementsByTagName("select");
				for (var i = 0; i < selects.length; i++) {
					if (selects[i].savedVisibility) {
						selects[i].style.visibility = selects[i].savedVisibility;
					}
					else {
						selects[i].style.visibility = "visible";
					}
				}
			@end
		@*/
		return false;
	};

	outerDiv.appendChild(innerDiv);

	document.body.appendChild(outerDiv);

	if (typeof(contents) == "object") { // assume DOM node
		innerDiv.appendChild(contents);
	} else {
		innerDiv.innerHTML += contents;
	}
	calcPos();

	if (innerDiv.firstChild) {
		innerDiv.insertBefore(closeLink, innerDiv.firstChild);
	}
	else {
		innerDiv.appendChild(closeLink);
	}
	/*@cc_on
		@if (@_jscript_version < 5.7)
			var selects = document.getElementsByTagName("select");
			for (var i = 0; i < selects.length; i++) {
				if (selects[i].style.visibility != "visible") {
					selects[i].savedVisibility = selects[i].style.visibility;
				}
				selects[i].style.visibility = "hidden";
			}
		@end
	@*/
}

// function to be called onload
var attachCategoriesModal = function() {
	var allButtons = document.getElementsByTagName("button");
	var categoriesButtons = [];
	// Get buttons having the class "categoriesButton"
	for (var i = 0; i < allButtons.length; i++) {
		if (/(^| )categoriesButton( |$)/.test(allButtons[i].className)) {
			categoriesButtons.push(allButtons[i]);
		}
	}

	// attach handlers to the buttons found
	for (var i = 0; i < categoriesButtons.length; i++) {
		categoriesButtons[i].onclick = function() {
			var modalwindow = new ModalWindow(modalWindowDummyContent);
			return false;
		};
	}
}
attachCategoriesModal();

if (document.getElementById('loginPopUp')) {
	document.getElementById('loginPopUp').onclick = function() {
		var modalwindow = new ModalWindow(modalWindowLogin, 500);
		return false;
	};
}
/*
if (document.getElementById('btn_subscribe')) {
	document.getElementById('btn_subscribe').onclick = function() {
		var modalwindow = new ModalWindow(modalWindowAlert, 368);
		return false;
	};
}*/

if (document.getElementById('btn_show_list')) {
	document.getElementById('btn_show_list').onclick = function() {
		var modalwindow = new ModalWindow(modalWindowList, 500);
		return false;
	};
}




function showEmailSuccess(){
var modalWindowAlert = '<table id="alert">'
+ '	<tr>'
+ '		<td>'
+ '			<h3>Alert</h3>'
+ '		</td>'
+ '	</tr>'
+ '	<tr>'
+ '		<td>'
+ '		<p><strong>Your message was sent successfully!</strong></p>'
+ '		</td>'
+ '	</tr>'
+ ' <tr><td>&nbsp;</td></tr>'
+ '		</table>';
 var modalwindow = new ModalWindow(modalWindowAlert, 500);
}

function showLogin(){
  var modalwindow = new ModalWindow(modalWindowLogin, 500);
  //return false;
}