/*
Script: Common.js
	Common JavaScript functions and Utility Classes for SZGraphics.com

License:
	MIT-style license.

Squigy & Ziggy's Graphics Copyright:
	copyright (c) 2008 Squigy & Ziggy's Graphics, <http://szgraphics.com>
	
ZiggyTech Copyright:
	copyright (c) 2008 Josh Zeigler, <http://ziggytech.net>

File Credits:
	- Scripts created by Josh Zeigler (<jzeigler@ziggyech.net>, <http://ziggytech.net>)
*/

var sz;
var SZGraphics = new Class({
	version: '1.0',
	
    defaultOptions: {
    },
    
    initialize: function(options) {
        this.setOptions($merge(this.defaultOptions, options));
    },
    
    validateContactForm: function() {
        $("sendButton").empty();
        $("sendButton").set("html", "Sending Message...");
        $("sendButton").removeEvent("click");
        
        var errors = [];
        var reEmail = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i
        var rePhone = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
		
        if($("name").value.length == 0) {
            errors.push("Please enter your name.");
        }
        
        if($("phone").value.length == 0) {
            errors.push("Please enter your phone number.");
        }        
        else if(!rePhone.test($("phone").value)) {
            errors.push("Please enter a valid phone number.");
        }
        
        if($("email").value.length == 0) {
            errors.push("Please enter your email address.");
        }        
        else if(!reEmail.test($("email").value)) {
            errors.push("Please enter a valid email address.");
        }
                
        if($("comments").value.length == 0) {
            errors.push("Please provide comments or questions.");
        }
                
        if($("recaptcha_response_field").value.length == 0) {
            errors.push("Please type the the two words into the reCAPTCHA field to verify you are a human.");
        }
        
        if(errors.length == 0) {
            $("errorZone").empty();
            $("errorZone").set('class', 'hide');
            $("messageZone").empty();
            $("messageZone").set('class', 'hide');
            
            this.ajaxSubmit("contactForm");
        }
        else {
            return(this.throwError(errors.join("<br />")));
        }
    },
    
    throwError: function(error) {
        $("errorZone").empty();
        $("errorZone").erase('class', 'hide');
        $("errorZone").set("html", error);
		checkContainerSizes();		
		
		$("sendButton").removeEvent('click');
		$("sendButton").addEvent('click', function() {sz.validateContactForm();return(false);});
		$("sendButton").set("html", "Send Message");
        
        return(false);
    },
    
    throwMessage: function(message) {
		if(message.contains("error")) {
			this.throwError(message);
		}
		else
		{
			$("messageZone").empty();
			$("messageZone").erase('class', 'hide');
			$("messageZone").set("html", message);
			checkContainerSizes();
		}
		
        return(false);
    },

    ajaxSubmit: function(frmId) {
        var frm = $(frmId);

        var onComplete = function() {
			$("sendButton").removeEvent('click');
            $("sendButton").addEvent('click', function() {sz.validateContactForm();return(false);});
            $("sendButton").set("html", "Send Message");
        }.bind(this);

        var ajaxOptions = {
            'onSuccess': function(responseText) {this.throwMessage(responseText)}.bind(this),
            'onFailure': function(request) {this.throwError(request.responseText)}.bind(this),
            'onComplete': onComplete
        };

		$(frm).set('send', ajaxOptions);
		$(frm).send();
    }
});

SZGraphics.implement(Events, Options);
var sz = new SZGraphics();

/**
 * Preload all mouseover images on the page and define a mouseover and mouseout
 * event for those images. All that is required is that the image has a class
 * name consisting of mouseover_* with the * being the rollover key to
 * apply to the mouseover image.
 *
 * i.e. look at the following examples to see how the class name is parsed
 *      <img class="mouseover_r" src="myimage.gif" alt=""/>
 *      out image = myimage.gif
 *      over image = myimage_r.gif
 *
 * @important! this function must be called by the onload event
 *
 * @param void
 * @return void
 *
 * @author Toby Miller <tmiller@resource.com>
 * @author Josh Zeigler <jzeigler@resource.com>
*/

function mouseoverSetup(image)
{
	// set internal vars
	var extlist = ['gif', 'jpg', 'jpeg', 'png'];
	var ext = null;
	var re = null;
	var klass = null;
	var clickklass = null;
	var key = null;
	var src = null;
	var oversrc = null;

	var init = function(el) {
		// get image source and class name
		src = el.src;
		klass = el.className;

		if (klass.contains('mouseclick_')) {
			// strip out additional classes (if they exist)
			re = new RegExp('.*(mouseclick_[a-zA-Z0-9-]+).*');
			clickklass = klass.replace(re, '$1');

			// find the supported extension
			extlist.each(function(x) {
				re = new RegExp('\\.' + x + '$');
				if (src.match(re)) {
					ext = x;
				}
			});

			if (ext != null) {
				// get this mouseover key
				re = new RegExp('mouseclick(_[a-zA-Z0-9-]+)');
				key = clickklass.replace(re, '$1');

				re = new RegExp('\\.' + ext + '$');
				el.activesrc = src.replace(re, key + '.' + ext);

				// setup onmouseover event
				el.addEvent('click', function(){
					this.removeEvents('mouseenter');
					this.removeEvents('mouseleave');
					this.setProperty('src', this.activesrc);
				});
			}
		}

		if (klass.contains('mouseover_')) {
			// strip out additional classes (if they exist)
			re = new RegExp('.*(mouseover_[a-zA-Z0-9-]+).*');
			klass = klass.replace(re, '$1');

			// find the supported extension
			extlist.each(function(x) {
				re = new RegExp('\\.' + x + '$');
				if (src.match(re)) {
					ext = x;
				}
			});

			if (ext != null) {
				// get this mouseover key
				re = new RegExp('mouseover(_[a-zA-Z0-9-]+)');
				key = klass.replace(re, '$1');

				if ((ext == 'png') && (document.all) && (navigator.userAgent.toUpperCase().indexOf('OPERA') < 0) && (navigator.userAgent.indexOf('MSIE 7') < 0)) {
					// get this mouseovers over src
					re = new RegExp('\\.' + ext + '$');
					oversrc = src.replace(re, key + '.' + ext);

					// get the dimensions
					width = el.getProperty('width');
					height = el.getProperty('height');

					// force the spacer for transparent backgrounds
					el.setProperty('src', _SPACER_IMAGE);

					// setup the new properties (replace mouseovers)
					el.overFilter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + oversrc + '\', sizingMethod=scale)';
					el.outFilter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=scale)';

					// apply the defaults
					el.style.filter = el.outFilter;
					el.style.width = width + 'px';
					el.style.height = height + 'px';

					// setup onmouseover event
					el.addEvent('mouseenter', function(){
						this.setStyle('filter', this.overFilter);
					});

					// setup onmouseout event
					el.addEvent('mouseleave', function(){
						this.setStyle('filter', this.outFilter);
					});
				}
				else {
					// get this mouseovers over src
					re = new RegExp('\\.' + ext + '$');
					oversrc = src.replace(re, key + '.' + ext);

					// preload both over and out images
					el.overImage = new Image();
					el.overImage.src = oversrc;
					el.outImage = new Image();
					el.outImage.src = src;

					// setup onmouseover event
					el.addEvent('mouseenter', function(){
						this.setProperty('src', this.overImage.src);
					});

					// setup onmouseout event
					el.addEvent('mouseleave', function(){
						this.setProperty('src', this.outImage.src);
					});
				}
			}
		}

		// reset vars
		ext = null;
		re = null;
		klass = null;
		clickklass = null;
		key = null;
		src = null;
		oversrc = null;
	};

	if(image != undefined) {
		init($(image));
	}
	else {
		$$('img').each(init);
	}
}

//on DOMReady, load up the mouse over events
window.addEvent('domready', mouseoverSetup);

var checkContainerSizes = function()
{
	var contentSize = 0;
	var sidebarSize = 0;
	
	if(Browser.Engine.trident) contentSize = $("content").getSize().y-4;
	else if(Browser.Engine.webkit) contentSize = $("content").getSize().y-2;
	else contentSize = $("content").getSize().y-2;
	
	if(Browser.Engine.trident) sidebarSize = $("sidebar").getSize().y-4;
	else if(Browser.Engine.webkit) sidebarSize = $("sidebar").getSize().y;
	else sidebarSize = $("sidebar").getSize().y-2;
	
	if($("content").hasClass("homeContent"))
	{
		if(Browser.Engine.trident) contentSize = contentSize + 24;
		else if(Browser.Engine.webkit) contentSize = $("content").getSize().y+6;
		else contentSize = contentSize + 10;
	}
	
	if(sidebarSize > contentSize)
	{
		$("sidebar").setStyle('height', '');
		$("content").setStyle('height', sidebarSize);

	}
	else
	{
		$("content").setStyle('height', '');
		$("sidebar").setStyle('height', contentSize);
	}
};

var openExamples = function(height)
{
	$("examples").set('tween', {'duration': 2500, 'transition': Fx.Transitions.Quad.easeInOut, 'onComplete': checkContainerSizes});
	$("examples").tween('height', height);
}

window.addEvent('domready', checkContainerSizes);