// JavaScript Document
function hideSwatch(obj){
	obj.style.display='none';
}
function showSwatch(obj, name, bgcolor){
	
	xPos = findXPos(obj);
	yPos = findYPos(obj);

	getElement('swatchHolder').style.position = "absolute";
	getElement('swatchHolder').style.zIndex = "10001";
	getElement('swatchHolder').style.left = 106+xPos+"px";
	getElement('swatchHolder').style.top = yPos+"px";
	getElement('swatchHolder').style.width = "200px";
	getElement('swatchHolder').style.height = "200px";
	getElement('swatchHolder').style.backgroundColor = bgcolor;
	getElement('swatchHolder').innerHTML = '<div style="padding:180px 0 0 0; text-align:center;">'+name+'</div>';
	getElement('swatchHolder').style.display='inline';
	
}

function showPreview(obj, name, img, pos, offer){
	
	xPos = findXPos(obj);
	yPos = findYPos(obj);
	var html = '';
	
	getElement('swatchHolder').style.position = "absolute";
	getElement('swatchHolder').style.zIndex = "10001";
	if(pos=='left'){
		getElement('swatchHolder').style.left = 0-327+xPos+"px";
		
	}else{
		getElement('swatchHolder').style.left = 123+xPos+"px";
	}
	getElement('swatchHolder').style.top = yPos+"px";
	getElement('swatchHolder').style.width = "200px";
	getElement('swatchHolder').style.height = "200px";
	html = '<div style="width:300px; height:320px; padding:10px; display:table-cell; text-align:center; background-color:#efefef; border: solid 1px #999;">';
	
	html += '<div style="width:300px; height:300px; display:table-cell; text-align:center;">';
	
	if(offer!=""){
		html += '<div class="offerFlash dropShadow">'+offer+'</div>';
	}
	
	html += '<img src="'+img+'&wl=300&hp=300" /></div><br/>'+name+'</div>';
	getElement('swatchHolder').innerHTML = html;
	getElement('swatchHolder').style.display='inline';
	
}

function getElement(el){
	if(document.getElementById(el)){
		return document.getElementById(el);
	}	 
}

function findYPos(obj) {
	var curtop = 0;
	if (obj.offsetParent) {
		do {
			curtop += obj.offsetTop;
			} while (obj = obj.offsetParent);
	return curtop;
	}
}

function findXPos(obj) {
	var curleft = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			} while (obj = obj.offsetParent);
	return curleft;
	}
}

function setImage(el){
	//alert(el.src.match(/\.\.[\,\/a-z_\-A-Z0-9\s]*\.[a-zA_Z]{3}/i));
	var elSrc = el.src.match(/\.\.[\%\,\/a-z_\-A-Z0-9\s]*\.[a-zA_Z]{4}/i);
	if(elSrc==null){
		elSrc = el.src.match(/\.\.[\%\,\/a-z_\-A-Z0-9\s]*\.[a-zA_Z]{3}/i);
	}
	document.getElementById('mainImg').src = 'phpThumb/phpThumb.php?src='+elSrc+'&wl=380&hp=520&q=95';
}

function enlargeImage(el){
	var elSrc = el.src.match(/\.\.[\%\,\/a-z_\-A-Z0-9\s]*\.[a-zA_Z]{3}/i);
	var container = document.getElementById('enlargementContainer');
	
	var newHTML = "<table style='border:5px solid #EDEDED;width:460px;background:#FFFFFF;' border='0' cellpadding='0' cellspacing='0'><tr><td style='width:450px; height:450px; text-align:center; border-bottom:5px solid #EDEDED;'><img src='phpThumb/phpThumb.php?src="+elSrc+"&wl=450&hp=450' style='float:none;'/></td></tr><tr><td style='height:40px; text-align:right; padding:0 25px 0 0;'><a href='Javascript: closeEnlrg();' class='grey'>X Close Window</a></td></tr></table>";
	
	container.innerHTML = newHTML;
	
}

function closeEnlrg(){
	var container = document.getElementById('enlargementContainer');
	while(container.firstChild){
		container.removeChild(container.firstChild);
	}
}

function numericInput(e){	
   /*
	* This function only allows the input of numeric characters (Key codes 48 - 57 incl.),
	* The period key (Key Code 46) and the tab and backspace key (Key Codes 0 and 8 respectively (Non IE only)) 
	*/
	var key;
	var keyChar;
	var result;
	if (window.event){
   		key = window.event.keyCode;
	}
	else if (e){
   		key = e.which;
	}
	if(key == 0 || key == 8){
		result = true;	
	}else{
		if(key >= 46 && key <= 57){
			if(key == 47){
				result = false;	
			}else{
				result = true;	
			}
		}else{
			result = false;	
		}
	}
	return result;
}

function calculateWallpaper(){
	var wallHeight 	= document.getElementById('wallHeight').value;
	var roomWidth 	= document.getElementById('roomWidth').value;
	var roomLength 	= document.getElementById('roomLength').value;
	var rollWidth 	= document.getElementById('rollWidth').value;
	var rollLength	= document.getElementById('rollLength').value;
	var pattern 	= document.getElementById('pattern').checked;
	
	var message = "";
	var doCalc = true;
	
	if(wallHeight == ""){
		message += "Please enter a wall height\n\n";	
		doCalc = false;
	}
	if(roomWidth == ""){
		message += "Please enter a room width\n\n";	
		doCalc = false;
	}
	if(roomLength == ""){
		message += "Please enter a room length\n\n";	
		doCalc = false;
	}
	if(rollWidth == ""){
		message += "Please enter a roll width\n\n";	
		doCalc = false;
	}
	if(rollLength == ""){
		message += "Please enter a roll length\n\n";	
		doCalc = false;
	}
	
	if(message != ""){
		alert(message);	
	}
	
	if(doCalc){
		wallHeight 	= parseFloat(wallHeight);
		roomWidth 	= parseFloat(roomWidth);
		roomLength 	= parseFloat(roomLength);
		rollWidth 	= parseFloat(rollWidth);
		rollLength	= parseFloat(rollLength);
		
		var wallArea = ((roomWidth * 2) + (roomLength * 2)) * wallHeight;
		if(pattern){
			wallArea = wallArea * 1.1;
		}
		
		var rollArea = rollWidth * rollLength;
		
		var rolls = wallArea / rollArea;
		rolls = Math.ceil(rolls);
		
		var resultArea = document.getElementById('wallpaperReqd');
		
		resultArea.innerHTML = "Approx "+rolls+" rolls required.";
	}
	
	return false;
}

function calculatePaint(){
	var wallHeight 	= document.getElementById('wallHeight').value;
	var roomWidth 	= document.getElementById('roomWidth').value;
	var roomLength 	= document.getElementById('roomLength').value;
	
	var message = "";
	var doCalc = true;
	
	if(wallHeight == ""){
		message += "Please enter a wall height\n\n";	
		doCalc = false;
	}
	if(roomWidth == ""){
		message += "Please enter a room width\n\n";	
		doCalc = false;
	}
	if(roomLength == ""){
		message += "Please enter a room length\n\n";	
		doCalc = false;
	}
	
	if(message != ""){
		alert(message);	
	}
	
	if(doCalc){
		wallHeight 	= parseFloat(wallHeight);
		roomWidth 	= parseFloat(roomWidth);
		roomLength 	= parseFloat(roomLength);
		
		var wallArea = ((roomWidth * 2) + (roomLength * 2)) * wallHeight;
		
		var litres = wallArea / 14;
		litres = litres.toFixed(1);
		
		var resultArea = document.getElementById('paintReqd');
		
		resultArea.innerHTML = "Approx "+litres+" litres required. (per coat)";
	}
	
	return false;
}

function showForm(type){
	var formDiv = document.createElement("div");
	formDiv.setAttribute("id", "floatForm");
	
	var formTitle = document.createElement("div");
	formTitle.setAttribute("id", "floatTitle");
	formTitle.innerHTML = "<h1 id=\"formTitle\" class=\"font12em\"><span class=\"white\">Request A Colour Card</span></h1>";
	
	formDiv.appendChild(formTitle);
	
	var formBody = document.createElement("div");
	formBody.setAttribute("id", "floatBody");
	
	bodyHTML = "<div class=\"font075em\"><span class=\"grey\">You can request a FREE colourcard by entering your details below:<br/></span><br/>";
	bodyHTML+= "<form action=\"\" method=\"post\" onsubmit=\"return requestSample()\">";							
	bodyHTML+= "<div class=\"padleft\"><strong><span class=\"purple\">Name</span><br/></strong>";
	bodyHTML+= "<input type=\"hidden\" id=\"type\" name=\"type\" value=\""+type+"\"/>";
        bodyHTML+= "<input class=\"calcInput\" type=\"text\" id=\"custName\" name=\"custName\"/><br/>";
        bodyHTML+= "<strong><span class=\"purple\">Address</span><br/></strong>";
        bodyHTML+= "<textarea class=\"calcInput\" id=\"custAddr\" name=\"custAddr\" rows=\"\" cols=\"\"></textarea><br/>";
        bodyHTML+= "<strong><span class=\"purple\">Telephone Number (inc Area Code)</span><br/></strong>";
        bodyHTML+= "<input class=\"calcInput\" type=\"text\" id=\"custTel\" name=\"custTel\"/><br/>";
        bodyHTML+= "<strong><span class=\"purple\">Email Address</span><br/></strong>";
        bodyHTML+= "<input class=\"calcInput\" type=\"text\" id=\"custEmail\" name=\"custEmail\"/><br/>";
        bodyHTML+= "<strong><span class=\"purple\">Manufacturer&rsquo;s Name</span><br/></strong>";
        bodyHTML+= "<input class=\"calcInput\" type=\"text\" id=\"manuName\" name=\"manuName\" value=\""+type+"\" onfocus=\"this.blur()\"/><br/>";
	bodyHTML+= "<image id=\"floatSubmit\"  src=\"images/btn_submit.gif\" alt=\"Submit\" onclick=\"return requestSample()\" style=\"cursor:pointer;\" /><br/><br/>";
	bodyHTML+= "<a href=\"Javascript: closeFloat();\" class=\"grey\">X Close Window</a><br/><br/></div></div>";
	formBody.innerHTML = bodyHTML;
	
	formDiv.appendChild(formBody);
	
	
	document.getElementById("sampleFormHolder").appendChild(formDiv);
}

function requestSample(){
	var custName 	= document.getElementById('custName').value;
	var custAddr 	= document.getElementById('custAddr').value;
	var custTel 	= document.getElementById('custTel').value;
	var custEmail 	= document.getElementById('custEmail').value;
    var manuName 	= document.getElementById('manuName').value;
	var type		= document.getElementById('type').value;
	
	var message = "";
	var result = true;
	
	if(custName == "" || custName == " "){
		message+= "Please enter your name\n\n";
		result = false;
	}
	if(custAddr == "" || custAddr == " "){
		message+= "Please enter your address\n\n";
		result = false;
	}
	if(custTel == "" || custTel == " "){
		message+= "Please enter your telephone number\n\n";
		result = false;
	}
	if(custEmail == "" || custEmail == " "){
		message+= "Please enter your email address\n\n";
		result = false;
	}else{
		if(!validateEmail()){
			message+= "Please enter a valid email address\n\n";
			result = false;
		}
	}
	
        if(manuName == "" || manuName == " "){
		message+= "Please enter the manufactutrer's name";
		result = false;
	}
	
	if(message != ""){
		alert(message);	
	}
	if(result){
		doRequest(custName, custAddr, custTel, custEmail, null, manuName, type);
	}
	return false;
}

function validateEmail(){
	var valid = true;
	var email = document.getElementById("custEmail");
	if(email.value == "" || email.value == " " || email.value == null){
		valid = false;
	}else{
		var emailValid = false;
		var email = email.value;
		var containsAt = false;
		for(var j = 0; j < email.length; j++){
			if(email.charAt(j) == '@'){
				containsAt = true;
			}
		}
		if(containsAt){
			if(email.charAt(email.length - 3) == '.' || email.charAt(email.length - 4) == '.'){
				if(!(email.charAt(email.length - 3) == '.' && email.charAt(email.length - 4) == '.')){
					emailValid = true;	
				}
			}
		}
		if(!emailValid){
			valid = false;
		}
	}
	return valid;
}

function testTelField(num){
	//alert(num);
	var valid = true;
	var telno = num;
	var newTelno = "";
	var telIsNumeric = true;
	for(var i = 0; i < telno.length; i++){
		if((telno.charAt(i) < '0' || telno.charAt(i) > '9') && telno.charAt(i) != ' '){
			telIsNumeric = false;
			valid = false;
		}
	}		
	if(telIsNumeric){			
		for(var i = 0; i < telno.length; i++){
			if(telno.charAt(i) != " "){
				newTelno += telno.charAt(i);	
			}
		}
		if(newTelno.length != 11){
			valid = false;
		}
	}else{
		valid = false;
	}
	return valid;
}

function doRequest(aName, aAddr, aTel, aEmail, aProd, aManu, aType){
        //alert(location.pathname);
	if (window.XMLHttpRequest)
        {
  		xmlhttp=new XMLHttpRequest();
        }
	else
  	{
  	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
	
	xmlhttp.onreadystatechange=function()
  	{
  		if (xmlhttp.readyState==4 && xmlhttp.status==200)
    	{
    		document.getElementById("floatBody").innerHTML= "<div class=\"font075em\"><span class=\"grey\">Thank you, your request has been accepted.<br/><br/><a href=\"Javascript: closeFloat();\"><img src=\"images/btn_close.gif\" alt=\"Close\" width=\"120\" height=\"36\"/></a><br/><br/></span></div>";
    	}
  	}
	var details = "custName="+aName+"&custAddr="+aAddr+"&custTel="+aTel+"&custEmail="+aEmail+"&custProd="+aProd+"&manu="+aManu+"&type="+type;
	xmlhttp.open("POST","colourCardRequest.php",true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send(details);
}

function closeFloat(){
	var holder = document.getElementById("sampleFormHolder");
	while(holder.firstChild){
		holder.removeChild(holder.firstChild);	
	}
}

function Carousel(el){
    //Reference to self
    var self = this;

    //Set Variables for the carousel
    this.carousel = el;
    this.scroller = this.carousel.find('table');
    this.width = this.scroller.width();
    this.left = 0;
    this.firstWidth = 0;
    this.interval = null;
    this.move = 1; //Pixel step to control speed

    //For Logo frogger
    //this.move = Math.ceil(Math.random() * 6);

    
    //Functions
    this.getFirstWidth = function(){
        var td = this.scroller.find('td:first');
        return td.outerWidth();
    }
    
    
    this.scrollLeft = function(){
        if(this.firstWidth == 0){
            this.firstWidth = self.getFirstWidth();
        }
        if(Math.abs(this.left) < this.firstWidth){
            this.left = this.left - this.move;
        }else{
            self.moveFirstToLast();
            this.left = -this.move;
        }
        this.scroller.css({left: this.left});
    }

    this.moveFirstToLast = function(){
        var td = this.scroller.find('td:first').clone();
        this.scroller.find('tr').append(td);
        this.scroller.find('td:first').remove();
        this.firstWidth = 0;
    }


    this.animate = function(){
        self.scrollLeft();
    }
    
    this.scroller.css({left: '0'});
    setTimeout(function(){
        this.interval = setInterval(function(){
            self.animate();
        }, 24);
    },300);
    
}