function valid_browser() {

	var arVersion = navigator.appVersion.split("MSIE");
	var version = parseFloat(arVersion[1]);
	var browser=navigator.appName;

	if( browser=="Microsoft Internet Explorer" && (version < 7) ) {
		return false;
	}
	else if( browser=="Netscape" || browser == "Microsoft Internet Explorer") {
		return true;
	}
	
}

if( valid_browser() ) {
//NOTE!
//The custom pencil information is being stored in the database table ProductsOrdered in the field xfdetails

//Beginning of Pencil Previewer JS
var viewingSide = 0;
var imprintColor1 = 'black';
var pencilColorName = '';

var m = 'ail';
var t = 'm';
var z = 'to';
var d = '@charter.net';
var me = t+m+z+':pencils'+d;
String.prototype.trim = function() {
	// Strip leading and trailing white-space
	return this.replace(/^\s*|\s*$/g, "");
}

String.prototype.normalize_space = function() {
	// Replace repeated spaces, newlines and tabs with a single space
	return this.replace(/^\s*|\s(?=\s)|\s*$/g, "");
}

function get_select( select_field ) {

	var rtn;

	if( select_field == 'imprintColor' ){
	
		$('select').each(function() {
			if( $(this).prev().html() == 'Imprint Color:') {
				rtn = $(this);
			}
		});
		
	}
	else if( select_field == 'pencilColor' ) {
	
		$('select').each(function() {
			var html = $(this).prev().html();
			if( html == 'Pencil Color:' || html == 'Pen Color:' || html == "Barrel/Trim Color:" || html == "Barrel Color:" ) {
				pencilColorName = $(this).attr('name');
				rtn = $(this);
			}
		});	
	
	}
	
	return rtn;
	
}

$(document).ready(function() {
	listMenu.activateMenu("listMenuRoot", arrow)
	var SKU = getSKU();

	if( SKU.length > 0 ) {

		//Load the JS File, and run the following code once it's loaded.
		$.getScript("admin/ajax/pencil.php?SKU="+SKU, function(){

		if( !Pencil.totalSides ) {
			return false;
		}
		
		if( typeof Pencil.maxTextLength != 'undefined' ) {
			$('#countchar1').html(Pencil.maxTextLength);
		}
		
		//Set Event Handlers
		var customText = $("input[name='xfield1']");
		var imprintColor = get_select('imprintColor'); //$("select[name='idOption1']").attr('id','imprintColor');
		$(imprintColor).attr('id','imprintColor');
		
		var pencilColor = get_select('pencilColor'); //$("select[name='idOption2']").attr('id','pencilColor');

		$(customText).keyup(function() {

			if( typeof caseSensative != 'undefined' && caseSensative == 'uppercase' ) {
				var val = $(this).val();
				$('#pencilText').text(val.toUpperCase());
			}
			else if( typeof caseSensative != 'undefined' && caseSensative == 'lowercase' ) {
				var val = $(this).val();
				$('#pencilText').text(val.toLowerCase());
			}
			else {
				$('#pencilText').text($(this).val());			
			}

		});

			//Set onsubmit event handler
			var checkproqtyTmp = checkproqty;

			checkproqty = function(x) {
				
				Pencil.mascot = $('#mascot :selected').text();
				Pencil.pencilColor = $('#pencilColor :selected').text();
				var rtn = checkproqtyTmp(x);
				
				var good = true;
				$('select').each(function() {
					if( $(this).find('option:selected').text() == 'Select One' ) {
						good = false;
					}
				});
				if( rtn && good ) {
					
					//Get the description of the pencil.
					var pencilDescription = ''; //'Pencil-Color: '+Pencil.pencilColor+', Imprint-Color: '+Pencil.fontColor+', Font-Style: '+Pencil.fontFamily+', Mascot: '+Pencil.mascot+', Mascot-Position: '+Pencil.mascotPosition;
					if( typeof Pencil.pencilColor != 'undefined' ) {
						pencilDescription += 'Pencil-Color: '+Pencil.pencilColor;
					}
					if( typeof Pencil.fontColor != 'undefined' ) {
						pencilDescription += ', Imprint-Color: '+Pencil.fontColor;
					}
					if( typeof Pencil.fontFamily != 'undefined' ) {
						pencilDescription += ', Font-Style: '+Pencil.fontFamily;
					}
					if( typeof Pencil.mascot != 'undefined' && Pencil.mascotPosition != 'undefined' ) {
						pencilDescription += ', Mascot: '+Pencil.mascot;
					}
					if( typeof Pencil.mascotPosition != 'undefined' && Pencil.mascot != 'undefined' ) {
						pencilDescription += ', Mascot-Position: '+Pencil.mascotPosition;
					}
					for( var i = 0; i < Pencil.totalSides; i++ ) {
						var text = Pencil.textOnSide[i];
						if( text.length == 0 ) {
							Pencil.textOnSide[i] = '[empty]';
						}
						pencilDescription += ' [Line '+(i+1)+':] '+Pencil.textOnSide[i];
					}				
				}

				$('#xfield1').attr('maxlength','250').val( pencilDescription );

				return rtn;
				
			}

			$('.pcSpacer:last').append(pencilPreviewer);

			//Build alternative pencil colors in select listing
			var i = 1;
			while( $("[name=idOption"+i+"]").length > 0 ) {
				i++;
			}

			
			var html = '<select id="pencilColor" name="'+pencilColorName+'" style="margin-top: 3px;"><option>Select One</option>';
			for( var x = 0; x < PencilColors.length; x++ ) {
				var img = new Image();
				img.src = 'admin/'+PencilColors[x][1];
				html += '<option value="'+PencilColors[x][1]+'">'+PencilColors[x][0]+' </option>';
			}
			html += '</select>';
			
			//Check alternate imprint colors
			Pencil.fontColor = $("#imprintColor :selected").text();
			
			if( imprintColorOption ) {						//Defined in pc/admin/ajax/pencil.php
				$(imprintColor).change(function() {
					Pencil.fontColor = $("#imprintColor :selected").text();
					var color = $(this).val();
					switch( color ) {
						case '165':
						case '381':
							color = 'red';
						break;
						case '164':
						case '380':
							color = 'purple';
						break;
						case '163':
						case '379':
							color = 'maroon';
						break;
						case '162':
						case '378':
							color = 'green';
						break;
						case '161':
						case '377':
							color = 'blue';
						break;
						case '160':
						case '376':
							color = 'black';
						break;
						case '159':
						case '375':
							color = 'gold';
						break;
						case '158':
						case '374':
							color = 'silver';
						break;
						case '157':
						case '373':
							color = 'white';
						break;
						default:
							color = $("#imprintColor :selected").text();
							color = color.normalize_space();
							color = color.trim();
							color = color.toLowerCase();
							if( color.indexOf('red') !== -1 ) {
								color = 'red';
							}
							else if( color.indexOf('purple') !== -1 ) {
								color = 'purple';
							}
							else if( color.indexOf('maroon') !== -1 ) {
								color = 'maroon';
							}
							else if( color.indexOf('green') !== -1 ) {
								color = 'green';
							}
							else if( color.indexOf('blue') !== -1 ) {
								color = 'blue';
							}
							else if( color.indexOf('black') !== -1 ) {
								color = 'black';
							}
							else if( color.indexOf('gold') !== -1 ) {
								color = 'gold';
							}
							else if( color.indexOf('silver') !== -1 ) {
								color = 'silver';
							}
							else if( color.indexOf('white') !== -1 ) {
								color = 'white';
							}
							//document.write('Setting imprint color to: "'+color+'"');
						break;
					}
					imprintColor1 = color;
					$('#pencilText').css('color', color);
					mascotColor(color);
				});
				imprintColor1 = color = 'black';
				$('#pencilText').css('color',color);
				
			}
			else {
				$("#imprintColor").replaceWith('<select name="idOption1"><option value="'+Pencil.fontColor+'">'+Pencil.fontColor+'</option></select>');
			}
			
			//Update alternative pencil colors list
			$(pencilColor).replaceWith(html);
			//select first option?
			$('#pencilColor option:eq(1)').attr('selected','selected');
			Pencil.pencilColor = $('#pencilColor :selected').text();
			Pencil.pencilColor = Pencil.pencilColor.trim();
			setTextAreaBackground(Pencil.colors[Pencil.pencilColor]);
			$('#pencilColor').change(function() {
				Pencil.pencilColor = $('#pencilColor :selected').text();
				Pencil.pencilColor = Pencil.pencilColor.trim();
				$('#displayArea').css('background','url(admin/'+$(this).val()+') no-repeat center right');
				setTextAreaBackground(Pencil.colors[Pencil.pencilColor]);
			});
			
			//Build the Mascot
			if( mascotOption ) {
				var action = "$('#hoverPreview').hide()";
				var select = '<br /><br />Select Mascot: <br /><select onchange="'+action+'" onblur="'+action+'" id="mascot" style="margin-top: 3px;">';
				for( var x = 0; x < Mascots.length; x++ ) {
					var img = new Image();
					img.src = 'admin/'+Mascots[x][1];
					select += '<option class="optionMascot" value="'+Mascots[x][1]+'">'+Mascots[x][0]+'</option>';
				}
				select += '</select> &nbsp;<a href="view-mascots.php" target="_blank">View Mascots</a><br /><br style="line-height: 8px;" /> <label>Left Of Text<input type="checkbox" id="MascotLeftOfText" /></label> <label>Right Of Text<input type="checkbox" id="MascotRightOfText" /></label><br /><br />Send us a  mascot/logo:<br /><a onmousedown="this.href=me;" href="mailto:invalid@email.com">Click Here</a> See - Logo/Mascot - page below for details.<br /> ';
				//Append Mascot select element
				$('#pencilColor').after(select);

				//Set handlers for check boxes
				$('#MascotLeftOfText').click(function() {
					var rightMascot = document.getElementById('MascotRightOfText');
					
					if( this.checked ) {
						
						if( rightMascot.checked ) {
							Pencil.mascotPosition = 'Both Sides of Text';
						}
						else {
							Pencil.mascotPosition = 'Left Of Text';
						}
					
						$('#leftMascot').css('visibility','visible').attr('src', 'admin/'+$('#mascot').val());
						mascotColor(imprintColor1);
					}
					else {
						
						if( rightMascot.checked ) {
							Pencil.mascotPosition = 'Right Of Text';
						}
						else {
							Pencil.mascotPosition = 'None';
						}
						
						$('#leftMascot').css('visibility','hidden').attr('src','');
					}

				});
				$('#MascotRightOfText').click(function() {
					var leftMascot = document.getElementById('MascotLeftOfText');
				
					if( this.checked ) {
					
						if( leftMascot.checked ) {
							Pencil.mascotPosition = 'Both Sides of Text';
						}
						else {
							Pencil.mascotPosition = 'Right of Text';
						}
					
						var path = $('#mascot').val();
						var name = path.slice(path.lastIndexOf('/')+1, path.length);
						path = path.slice(0, path.lastIndexOf('/'))+'/mirrored-'+name;
						
						$('#rightMascot').css('visibility','visible').attr('src', 'admin/'+path);
						mascotColor(imprintColor1);
					}
					else {
						
						if( leftMascot.checked ) {
							Pencil.mascotPosition = 'Left of Text';
						}
						else {
							Pencil.mascotPosition = 'None';
						}
						
						$('#rightMascot').css('visibility','hidden').attr('src','');
					}

				});
				Pencil.mascot = $('#mascot :selected').text();
				//set mascot event handler
				$('#mascot').change(function() {
					Pencil.mascot = $('#mascot :selected').text();
					var path = $('#mascot').val();
					var name = path.slice(path.lastIndexOf('/')+1, path.length);
					path = path.slice(0, path.lastIndexOf('/'))+'/mirrored-'+name;
					
					$('#rightMascot').attr('src', 'admin/'+$(this).val());
					$('#leftMascot').attr('src','admin/'+path);
					mascotColor( imprintColor1 );
				});

			}
			function mascotColor( color ) {
				if( !mascotOption ) {
					return false;
				}
				var path = $('#mascot').val();
				var name = path.slice(path.lastIndexOf('/')+1, path.length);
				name = name.slice(0,name.lastIndexOf('-'));
				var ext = path.slice(path.lastIndexOf('.'), path.length);
				
				
				path = path.slice(0, path.lastIndexOf('/'))+'/'+name+'-'+color+ext
				var path1 = path.slice(0, path.lastIndexOf('/'))+'/mirrored-'+name+'-'+color+ext;
				
				$('#rightMascot').attr('src', 'admin/'+path1);
				$('#leftMascot').attr('src','admin/'+path);
				
			}
			//Build font selector
			if( typeFace ) {
				var fonts = '<br /><br />Select Font: <br /><select id="font"><option value="arial"><span style="font-family: arial">Arial</span></option>';
				fonts += '<option value="Comic Sans MS"><span style="font-family: Comic Sans MS">Comic Sans MS</span></option>';
				fonts += '<option value="Times New Roman"><span style="font-family: Times New Roman">Times New Roman</span></option></select>';

				//Append fonts select element
				$('#pencilColor').after(fonts);
				
				//Set event handlers for fonts
				Pencil.fontFamily = $('#font :selected').text();
				$('#font').change(function() {
					Pencil.fontFamily = $(this).val();
					$('.pencilSide').css('font-family', $(this).val());
				});		
			}
			
			//Multiple Lines of Pencil Text
			if( typeof multipleSidesOptions != 'undefined' && multipleSidesOptions || true ) {
			
				//Remove existing input fields
				for( var y = 0; y < Pencil.totalSides; y++ ) {
					if( document.getElementById('xfield'+(y+1)) != null && y != 0 ) {
						//alert(document.getElementById('xfield'+(y+1)));
						document.parentElement.removeChild(document.getElementById('xfield'+(y+1)));
					}
				}
			
				var html = '';
				for( var x = 0; x < Pencil.totalSides; x++ ) {
				
					html += '<br />Line '+(x+1)+': <input ';
					if( caseSensative !== false ) {
						html += 'style="text-transform: '+caseSensative+';" ';
					}
					html += 'type="text" id="xfield'+(x+1)+'"';
						if( x == 0 ) {
							html += 'name = "xfield1"';
						}
					html += ' style="margin-top: 6px;" onfocus="updateCounter('+(x+1)+', '+Pencil.maxTextLength+')" maxlength="'+Pencil.maxTextLength+'" size="'+Pencil.maxTextLength+'" />';
					html += '<br />'; // view text on pencil
					
				}
				$("input[name='xfield1']").replaceWith(html);
				for( var x = 0; x < Pencil.totalSides; x++ ) {
					var tmp = document.getElementById('xfield'+(x+1));
					tmp.key = x;
					tmp.onkeyup = function() {
						Pencil.textOnSide[this.key] = this.value;
						testchars(this, 1, Pencil.maxTextLength);
						displayText(this.key); //Update Text
					}
				}
				$('.pencilSide').css('font-size',Pencil.fontSize);
			}
//			else {
//				$('input[name="xfield1"]').attr('id','pencilSide1').attr('maxlength',Pencil.maxTextLength).attr('size',Pencil.maxTextLength).keyup(function() { testchars(this, 1, Pencil.maxTextLength); displayText(1); });
//			}
			
			//Align text on pencil and apply offset
			if( textAlign !== false || typeof textAlign != 'undefined' ) {
				$('#textAlignment').attr('align', textAlign);
			}
			if( textOffset !== false && typeof textOffset != 'undefined' && textAlign != 'center' ) {
				$('#marginTable').css('margin-'+textAlign, textOffset+'px');
			}
			else if ( textAlign == 'center' && textOffset != false ) {
				$('#marginTable').css('margin-right', textOffset+'px');
			}
			
		});
	
	}
	
});
function setTextAreaBackground( color ) {
	$('#pencilText').css('background-color',color);
}
function displayText( id ) {
	if( id !== false ) {
		viewingSide = id;	
	}

	if( typeof caseSensative != 'undefined' && caseSensative == 'uppercase' ) {
		var val = Pencil.textOnSide[viewingSide];
		$('#pencilSide'+id).text(val.toUpperCase());
	}
	else if( typeof caseSensative != 'undefined' && caseSensative == 'lowercase' ) {
		var val = Pencil.textOnSide[viewingSide];
		$('#pencilSide'+id).text(val.toLowerCase());
	}
	else {
		$('#pencilSide'+id).text(Pencil.textOnSide[viewingSide]);			
	}
}

function updateCounter( idx, maxlen ) {
	var tmp1 = document.getElementById('xfield'+idx).value;
	var length = ( tmp1.length > 0 )? tmp1.length : 0;
	document.getElementById("countchar1").innerHTML=maxlen-length;
}

function getSKU() {
	var SKU = $('.pcShowProductSku:first').text();
	if( SKU.indexOf(':') ) {
		return SKU.slice(SKU.indexOf(':')+1);	
	}
	else {
		return '';
	}
}

function showMascot( src, hide ) {
	var pos = $('#mascot').offset();
	var width = $('#mascot').width();
	
	if( hide ) {
		$('#hoverPreview').hide();
	}
	
	if( src == 'none' ) {
		$('#hoverPreview').hide('slow');
	}
	else {
		$('#hoverPreview').attr('src','admin/'+src).css({top: pos.top, left: ((width+pos.left)+30)}).show();
	}
}

//End Of Pencil Previewer JS Functions

var toggle = 0;
var path = 'styles/images/navigation/';
var preLoader = ['home_selected.png','browseProducts_selected.png','customPencils_selected.png','specials_selected.png'];
for( var x = 0; x < preLoader.length; x++ ) {
	var img = new Image();
	img.src = path+preLoader[x];
}
$(document).ready(function() {

	$('body').append('<img id="hoverPreview" src="" />');

	$('#smallsearchbox').val('Enter Search Terms...');
	$('#smallsearchbox').mousedown(function() {
		if( this.value == 'Enter Search Terms...' )
			this.value = '';
	});
	$('#smallsearchbox').blur(function() {
		if(this.value == '' ) {
			this.value = 'Enter Search Terms...';
		}
	});
	$('.tab').mouseover(function() {
		if( toggle == 0 ) {
			toggle = 1;
			$(this).animate({top: '-5px'}, 300, function(){ 
				toggle = 0;
			});
		}
	});
	$('.tab').mouseout(function() {
		$(this).stop();
		$(this).css('top','0px');
		toggle = 0;
	});
});
}