// JavaScript Document

(new Image()).src="images/calculate_h.png";
(new Image()).src="images/button_h.png";
var pat1=new RegExp("[^0123456789\\-\\.]");

function check(str)
{
	var flag=0;
	for(var i=0;i<str.length;i++)
	{
		if(str.charAt(i)==".")
			flag++;
	}
	if(flag>1)
		return true;
	else
		return false;
}

function validate()
{
/////////////////////////////////////////////////////////////////////////////////////////////////////////
//	return true;		// temporary : must be removed 
/////////////////////////////////////////////////////////////////////////////////////////////////////////	
	with(document.forms["data1"])
	{
		if(elements["width"].value=="" || elements["width"].value==null)
		{
			alert("Width not entered : Please enter width !");
			elements["width"].focus();
			return false;
		}
		else if(elements["height"].value=="" || elements["height"].value==null)
		{
			alert("Height not entered : Please enter height !");
			elements["height"].focus();
			return false;
		}
		else if(pat1.test(elements["width"].value) || check(elements["width"].value))
		{
			alert("Invalid input : Please enter numeric data !");
			elements["width"].select();
			elements["width"].focus();
			return false;
		}
		else if(pat1.test(elements["height"].value) || check(elements["height"].value))
		{
			alert("Invalid input : Please enter numeric data !");
			elements["height"].select();
			elements["height"].focus();
			return false;
		}
		else if(Number(elements["width"].value)<=0)
		{
			alert("Improper input : Please enter values greater than zero !");
			elements["width"].select();
			elements["width"].focus();
			return false;			
		}
		else if(Number(elements["height"].value)<=0)
		{
			alert("Improper input : Please enter values greater than zero !");
			elements["height"].select();
			elements["height"].focus();
			return false;			
		}
		else if(Number(elements["width"].value)>60 && Number(elements["height"].value)>60)
		{
			alert("Canvas material is limited to 60 inches in shorter dimension !");
			if(Number(elements["height"].value)>Number(elements["width"].value))
			{
				elements["width"].select();
				elements["width"].focus();
			}
			else
			{
				elements["height"].select();
				elements["height"].focus();
			}
			return false;			
		}
		else
			return true;
	}
}
function Reset()
{
	document.forms["data1"].elements["width"].value="";
	document.forms["data1"].elements["height"].value="";
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// class myToolTip : Windows style Tooltip
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var myToolTip = new Class({

	// Member Variables
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	self:null,
	curpos:{x:0,y:0},
	offset:{x:2,y:2},
	timer:null,
	timer2:null,
	delay:250,
	
	// Constructor
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	initialize: function(parent,options)
	{	//INIT Options
		//options.offset={x: ,y: ) {Number}(in px)
		//options.delay ==> {Number} (in msec)
		//options.width / options.height ==> {Number} (in px)
		//options.innerHTML ==> {string}
		//options.childrenHaveTooltip ==> {boolean} 
		
		this.self=document.createElement('div');
		this.self.style.position="absolute";
		this.self.style.zIndex=10000;
		document.body.appendChild(this.self);
		
		this.self.shadow=document.createElement('div');
		this.self.shadow.className="tooltip-shadow";
		this.self.appendChild(this.self.shadow);

		this.self.tooltip=document.createElement('div');
		this.self.tooltip.className="tooltip-textbox";		
		this.self.appendChild(this.self.tooltip);
		
		if(options.offset)
		{
			if(options.offset.x)
				this.offset.x=options.offset.x;
			if(options.offset.y)
				this.offset.y=options.offset.y;
		}
		if(options.delay)
			this.delay=options.delay;
		
		var temp_w= ((options.width)?options.width:50);
		var temp_h= ((options.height)?options.height:50);
		this.setDimensions(temp_w,temp_h);
		
		if(options.innerHTML)
			this.setHTML(options.innerHTML.toString());
		
		var _this=this;
		$(parent).addEvent('mousemove',function(e)
		{
			if(!e) e=window.event;
			
			_this.curpos.x=e.page.x;
			_this.curpos.y=e.page.y;
		});
		$(parent).addEvent('mouseover',function(e)
		{
			var e= new Event(e);
			if(_this.timer!=null)
			{
				clearTimeout(_this.timer);
				_this.timer=null;
			}
			else
			{
			_this.timer=setTimeout(function()
			{
				_this.timer=null;
				
				_this.setPosition(_this.curpos.x+_this.offset.x,_this.curpos.y+_this.offset.y);
				
				//_this.self.shadow.style.opacity=".30";
				//_this.self.shadow.style.filter="alpha(opacity=30)";
				
				//_this.self.tooltip.style.opacity=".45";
				//_this.self.tooltip.style.filter="alpha(opacity=45)";
				
				_this.show();
			},_this.delay);
			}
			e.stopPropagation();
			//$('myStatusBar').innerHTML="over, "+$('myStatusBar').innerHTML;
		});
		$(parent).addEvent('mouseout',function(e)
		{
			var e= new Event(e);
			if(_this.timer!=null)
			{
				clearTimeout(_this.timer);
				_this.timer=null;
			}
			else
			{
				_this.timer=setTimeout(function()
				{
					_this.timer=null;
					
					_this.hide();
				},_this.delay);
			}
			//_this.hide();
			e.stopPropagation();
			//$('myStatusBar').innerHTML="out, "+$('myStatusBar').innerHTML;
		});
		$(_this.self).addEvent('mouseenter',function(e)
		{
			var e= new Event(e);
			e.stopPropagation();
			
			//_this.self.shadow.style.opacity=".75";
			//_this.self.shadow.style.filter="alpha(opacity=75)";
			
			//_this.self.tooltip.style.opacity="1";
			//_this.self.tooltip.style.filter="alpha(opacity=100)";
			
			_this.self.style.zIndex=11000;
			
			if(_this.timer2!=null)
				clearTimeout(_this.timer2);
			_this.timer2=null;
			
			if(_this.timer!=null)
			{
				clearTimeout(_this.timer);
				_this.timer=null;
			}
			
			//$('myStatusBar').innerHTML="_enter, "+$('myStatusBar').innerHTML;
		});
		$(_this.self).addEvent('mouseleave',function(e)
		{
			var e= new Event(e);
			e.stopPropagation();
			
			//_this.self.shadow.style.opacity=".30";
			//_this.self.shadow.style.filter="alpha(opacity=30)";
				
			//_this.self.tooltip.style.opacity=".45";
			//_this.self.tooltip.style.filter="alpha(opacity=45)";
			
			_this.self.style.zIndex=10000;
			
			//if(_this.timer2==null)
			//	_this.timer2=setTimeout(function(){_this.hide();},1000);
			
			if(_this.timer!=null)
			{
				clearTimeout(_this.timer);
				_this.timer=null;
			}
			else
			{
				_this.timer=setTimeout(function()
				{
					_this.timer=null;

					_this.hide();
				},_this.delay);
			}
			
			//$('myStatusBar').innerHTML="_leave, "+$('myStatusBar').innerHTML;
		});
		
		this.setPosition(0,0);
		this.hide();
	},
	
	// Member Functions
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	setPosition: function(x,y)
	{
		if(!window.opera)
		{
		if(($(this.self.shadow).getCoordinates().width+x) >  (window.getWidth()+window.getScroll().x))
			x=window.getWidth()+window.getScroll().x-($(this.self.shadow).getCoordinates().width+25);
		}		
		
		this.self.style.left=x+"px";
		this.self.style.top=y+"px";
	},
	setDimensions: function(width,height)
	{
		this.self.shadow.style.width=(width+6)+"px";
		this.self.tooltip.style.width=width+"px";
		this.self.shadow.style.height=(height+6)+"px";
		this.self.tooltip.style.height=height+"px";
	},
	show: function()
	{
		this.self.style.visibility="visible";
		this.self.shadow.style.visibility="visible";
		this.self.tooltip.style.visibility="visible";
		
		var _this=this;
		//if(this.timer2==null);
		//	this.timer2=setTimeout(function(){_this.hide();},1000);
	},
	hide: function()
	{
		this.timer2=null;
		
		this.self.style.visibility="hidden";
		this.self.shadow.style.visibility="hidden";
		this.self.tooltip.style.visibility="hidden";
	},
	setHTML: function(text)
	{
		this.self.tooltip.innerHTML=text;
	}
});

window.addEvent('load',function()
{
	var helptips={
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////		
 		hlpImgSize: function(){return new myToolTip($('hlpImgSize'),{
			width:300,
			height:70,
			innerHTML:"<span class=\"head5\">Not sure what size ? </span><br>Use our <a href=\"proportion.php\" target=\"_blank\">proportional sizing calculator</a> (new window)"
		})}(),
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
		hlpCumlPrice: function(){return new myToolTip($('hlpCumlPrice'),{
			width:360,
			height:80,
			innerHTML:"<span class=\"head5\">Cumulative Pricing </span><br>Price based on lifetime cumulative volume per image. <br>Your giclee prices go down as your total sales volume increases. <br>Free photography and set-up with $250 minimum order."
		})}(),
		hlpVolPrice: function(){return new myToolTip($('hlpVolPrice'),{
			width:340,
			height:80,
			innerHTML:"<span class=\"head5\">Volume Price </span><br>Price based on single bulk purchase per image <br>Our lowest giclee prices. Photography and set-up included. <br>Multi-image volume discounts also available"
		})}(),
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////		
		hlpCat58BSS: function(){return new myToolTip($('hlpCat58BSS'),{
			width:275,
			height:250,
			innerHTML:"<span class=\"head5\">5/8 inch Side Staple </span><br>Actual bar dimensions 5/8 inch H x 1&frac12; W <br>Excess canvas trimmed or folded (optional) <br>Additional details <a href=\"gicleefinishing.html\" target=\"_blank\">here</a> (new window) <br><br><center><img src=\"images/58sidestaple.jpg\"></center>"
		})}(),
		hlpCat1BSS: function(){return new myToolTip($('hlpCat1BSS'),{
			width:275,
			height:250,
			innerHTML:"<span class=\"head5\">1 inch Side Staple </span><br>Actual bar dimensions 15/16 inch H x 2 3/8 W <br>Excess canvas trimmed or folded (optional) <br>Additional details <a href=\"gicleefinishing.html\" target=\"_blank\">here</a> (new window) <br><br><center><img src=\"images/1inchsidestaple.jpg\"></center>"
		})}(),
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////		
		hlpCat1BGW: function(){return new myToolTip($('hlpCat1BGW'),{
			width:275,
			height:250,
			innerHTML:"<span class=\"head5\">1 inch Gallery Wrap </span><br>Actual bar dimensions 15/16 inch H x 2 3/8 W <br>Hand-Painted sides (std) or image wrap (optional)<br>Additional details <a href=\"gicleefinishing.html\" target=\"_blank\">here</a> (new window) <br><br><center><img src=\"images/1inchgallerywrap.jpg\"></center>"
		})}(),
		hlpCat112BGW: function(){return new myToolTip($('hlpCat112BGW'),{
			width:275,
			height:250,
			innerHTML:"<span class=\"head5\">1 &frac12; inch Gallery Wrap </span><br>Actual bar dimensions 1&frac12; inch H x 1 7/8 W <br>Hand-Painted sides (std) or image wrap (optional)<br>Additional details <a href=\"gicleefinishing.html\" target=\"_blank\">here</a> (new window) <br><br><center><img src=\"images/112inchimagewrap.jpg\"></center>"
		})}(),
		hlpCat2BGW: function(){return new myToolTip($('hlpCat2BGW'),{
			width:275,
			height:250,
			innerHTML:"<span class=\"head5\">2 inch Gallery Wrap </span><br>Actual bar dimensions 1 7/8 inch H x 1&frac12;  W <br>Hand-Painted sides (std) or image wrap (optional)<br>Additional details <a href=\"gicleefinishing.html\" target=\"_blank\">here</a> (new window) <br><br><center><img src=\"images/2inchgallerywrap.jpg\"></center>"
		})}(),
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////		
		hlpCatMM: function(){return new myToolTip($('hlpCatMM'),{
			width:275,
			height:250,
			innerHTML:"<span class=\"head5\">Masonite Mount </span><br>Fusion Mount to 1/8 inch board <br>24 x 36 maximum size <br>Additional details <a href=\"gicleefinishing.html\" target=\"_blank\">here</a> (new window) <br><br><center><img src=\"images/masonitemountgiclee.jpg\"></center>"
		})}(),
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////		
		hlpCat2MU: function(){return new myToolTip($('hlpCat2MU'),{
			width:275,
			height:250,
			innerHTML:"<span class=\"head5\">Unstretched 2 inch Margins </span><br>Use for side staple mounting on 5/8 thru 1 inch bars. <br><br><center><img src=\"images/unstretched2inch.jpg\"></center>"
		})}(),
		hlpCat4MU: function(){return new myToolTip($('hlpCat4MU'),{
			width:300,
			height:250,
			innerHTML:"<span class=\"head5\">Unstretched 4 inch Margins </span><br>Use for Gallery Wrap mounting on 1 thru 2 inch bars. <br>Note solid color printed border area (1&frac12; inch standard). <br><br><center><img src=\"images/unstretched4inch.jpg\"></center>"
		})}(),
		hlpCatNMU: function(){return new myToolTip($('hlpCatNMU'),{
			width:275,
			height:225,
			innerHTML:"<span class=\"head5\">Unstretched No Margins </span><br>Use for mounting on board or flat surface. <br><br><center><img src=\"images/unstretched0inch.jpg\"></center>"
		})}()
	};
});