$(document).ready(function() {


//GET WINDOW DIMENSIONS  
function winDims(){
	dE = document.documentElement;dEW = dE.clientWidth;dEH = dE.clientHeight;
	return(new Array(dEW,dEH));
} 

//get json file for variables describing the carosel pictures elements
	$.getJSON('assets/carosel_pics.json',function(data){
		var $pixCount =  (data.pagePicCount - 0);
		var $baseDir = data.baseDir + 'Carosel-Small/';
		var $baseDirLG = data.baseDir + 'Carosel-Large/';
		var $dirImages = data.dirImages;
		
		$pixCountRandArr = mkRandNumArr($pixCount,$dirImages.length);
		
		popupDivInner = $('div.carosel_popup_inner');
				
		$('#carosel_pics li').each(function(index){
			$thisArrIndex = $pixCountRandArr[index];
			$thisSrcImg = $baseDir + $dirImages[$thisArrIndex];
			$(this).find('img').attr({'src':$thisSrcImg,'title':$dirImages[$thisArrIndex]});
		
/*
			$(this).click(function(){

				thisLi = $(this);
				thisImg = thisLi.find('img');
				
				thisImgTitle = thisImg.attr('title');
				thisImgPath = $baseDirLG + thisImgTitle;
				popupImg = '<img id="newImg" src="' + thisImgPath + '" />';
				
				popupDivOuter = $('div.carosel_popup_outer');
				popupDivBckgnd = $('div.carosel_popup_bckgnd');
				
				winHeight = winDims()[1];
				bodyHeight = parseInt($('body').css('height'));
				bckHeight = 0;
				(winHeight <= bodyHeight)? bckHeight = bodyHeight : bckHeight = winHeight;  
				
				popupDivOuter.css({display:'block'});
				popupDivBckgnd.css({display:'block','height':bckHeight}).animate({opacity:.6},1000);

				popupDivClose = $('div#carosel_popup_close');
				popupDivViewer = $('div#carosel_popup_viewer');
				popupDivInner.fadeIn(500,function(){
				
					popupDivViewer.html(popupImg);
					popupDivClose.css('width');
				
					thisPopupClose = $('div#carosel_popup_close');
					thisPopupCloseH = thisPopupClose.css('height');
					thisPopupCloseW = thisPopupClose.css('width');

					thisImg = $('div#carosel_popup_viewer').find('img');
					thisImgH = thisImg.css('height');
					thisImgW = thisImg.css('width');
					
					popupDivInner.css({
						'height':parseInt(thisImgH) + parseInt(thisPopupCloseH) + 60,
						'width':parseInt(thisImgW) + parseInt(thisPopupCloseW) + 60,
						 'margin-left':'auto',
						 'margin-right':'auto',
						 'margin-top':'15%'
						});
					thisPopupClose.css({'margin-left':10,
						'margin-top':10
						});
					thisImg.css({'margin-left':17,
						'margin-top':18
						});
				});
			}).hover(
				function(){
					thisImg = $(this).find('img');
					thisImgTitle = thisImg.attr('title');
					thisImgPath = $baseDirLG + thisImgTitle;
					thisImg.attr({'src':thisImgPath,'title':thisImgTitle});
				},
				function(){
					thisImg = $(this).find('img');
					thisImgTitle = thisImg.attr('title');
					thisImgPath = $baseDir + thisImgTitle;
					thisImg.attr({'src':thisImgPath,'title':thisImgTitle});
					popupDiv = $('div.carosel_popup');
					popupDiv.fadeOut(250).html('');
				}
			);
*/
		});
		
				
		popupDivInner.click(function(){
		
			popupDivOuter.fadeOut(function(){
				popupDivBckgnd.fadeOut(function(){
					$(this).css({display:'none',opacity:1});
				});
				popupDivOuter.css({display:'none'});
			});
		
		});
		
		
	});








	

/*
$("div.errorConsole").css('font-size','8px').text(thisImgPath);
*/
/* console.log(popupDivInner.css('margin-left')); */
				
//get json file for variables describing the carosel pictures elements
/*
	$.getJSON('assets/carosel_pics.json',function(data){
		var $pixCount =  (data.pagePicCount - 0);
		var $baseDir = data.baseDir + 'Carosel-Small/';
		var $dirImages = data.dirImages;	
		$pixCountRandArr = mkRandNumArr($pixCount,$dirImages.length);
		$('div.carosel_inner ul li').find('img').each(function(index){		
			$thisArrIndex = $pixCountRandArr[index];
			$thisSrcImg = $baseDir + $dirImages[$thisArrIndex];
			$(this).attr('src',$thisSrcImg);
		});
	});
*/
	
//SETTING UP OUR POPUP  
//0 means disabled; 1 means enabled;  
	var popupStatus = 0;  
	//loading popup with jQuery magic!  
	function loadPopup(){  
		//loads popup only if it is disabled  
		if(popupStatus==0){  
			$('div#popup_dim_lights').css({  
				'opacity': '0.7'  
			});  
			$('div#popup_dim_lights').fadeIn('slow');  
			$('div#popup_outer').fadeIn('slow');  
			popupStatus = 1;  
		}  
	}
//disabling popup with jQuery magic!  
	function disablePopup(){  
		//disables popup only if it is enabled  
		if(popupStatus==1){  
			$('div#popup_outer').fadeOut('slow');  
			$('div#popup_dim_lights').fadeOut('slow');  
			popupStatus = 0;  
		}  
	} 
//centering popup  
	function centerPopup(){  
		//request data for centering  
		var windowWidth = document.documentElement.clientWidth;  
		var windowHeight = document.documentElement.clientHeight;  
		var popupHeight = $('div#popup_outer').height();  
		var popupWidth = $('div#popup_outer').width();  
		//centering  
		$('div#popup_outer').css({  
			"position": "absolute",  
			"top": '2%',  
			"left": windowWidth/2-popupWidth/2  
		});  
		//only need force for IE6  
		  
		$('div#popup_dim_lights').css({'height': windowHeight});  
	   
	} 

				
//CLOSING POPUP  
//Click the x event!  
	$('div.popup_close').click(function(){  
		disablePopup();  
	});  
//Click out event!  
	$('div#popup_dim_lights').click(function(){  
		disablePopup();  
	});  
//Press Escape event!  
	$(document).keypress(function(e){  
		if(e.keyCode==27 && popupStatus==1){  
			disablePopup();  
		}  
	});

//alert('-:$jsonDoc:-' + newHTML);
   $('div.lbox_services, div.lbox_appointments, div.lbox_training, div.lbox_products, div.lbox_bios').click(function(){
   		elId = $(this).attr('id');
			$('div.popup_content_inner').empty();
			
	   		if(elId.indexOf('services') > -1){
		   		$jsonDoc = 'assets/' + $(this).attr('id') + '.json';
				$.getJSON($jsonDoc ,function(jsonData){
					newHTML = loadDATAservices(jsonData);
					$('div.popup_content_inner').append(newHTML);
				});
	   			thisBackground = 'transparent url(images/Popups/Textures-Salon-Popup-Titles-Services.png) no-repeat scroll -80px 6px';
	   		}else if(elId.indexOf('products') > -1){
   				$jsonDoc = 'assets/' + 'html-products.html';
				$('div.popup_content_inner').load($jsonDoc,function(){
					$infoHolder = $('div.popup_content_outer');
					$infoHolder.css({
						'background-color':'#fff'
						});
					$productEls = $('#content_products');
					$productEls.find('li').hover(
						function(){
							$(this).css({'background-position':'0px -183px'});
						},
						function(){
							$(this).css({'background-position':'0px 0px'});
					});
				});
	   			thisBackground = 'transparent url(images/Popups/Textures-Salon-Popup-Titles-Products.png) no-repeat scroll -80px 6px';

	   		}else if(elId.indexOf('appointments') > -1){
   				$jsonDoc = 'assets/' + 'html-appointments.html';
				$('div.popup_content_inner').load($jsonDoc,function(data){
					$infoHolder = $('div.popup_content_outer');
					$infoHolder.css({
						'background-color':'#8DA69E'
						});
					$appointmentInfo = $('div.appointments_outer');
					$appointmentInfo.css({
						'margin':'70px 0 0 120px'
						});
						
					$('input').blur(function(){
					
						inputObj = $(this);
						inputValue = inputObj.attr('value');
						inputId = inputObj.attr('id');
						labelObj = $('#' + inputId + '_label');
						goColor = '#445135';//buleish
						noColor = '#ff0000';//red
						
						manipOptions = [goColor,noColor,false];
						nameElems = [labelObj,inputObj];
						nameMsgs = ['',''];
						if(inputId.indexOf('anEmailAddress') >= 0){
							compareType = ['anEmailAddress'];
							inputCheck(nameElems,compareType,nameMsgs,manipOptions);
						}else if(inputId.indexOf('aContactNumber') >= 0){
							compareType = ['aContactNumber'];
							inputCheck(nameElems,compareType,nameMsgs,manipOptions);
						}else if(inputId.indexOf('aFullName') >= 0){
							compareType = ['aFullName'];
							inputCheck(nameElems,compareType,nameMsgs,manipOptions);
						}
					});
					
					$('select').change(function(){
						origSelectText = '--Please Choose--';
						thisObj = $(this);
						thisObjSelectedText = thisObj.find('option:selected').text();						
						thisObjParent = $(this).parent();
						thisTitleDiv = thisObjParent.find('div');
						if (thisObjSelectedText == origSelectText){
							thisTitleDiv.css('color','red');
						}else{
							thisTitleDiv.css('color','#445135');
						}
					});
					
					$('form#hair_appointment').submit(function(){
						
						var name_OK = false;
						var phone_OK = false;
						var email_OK = false;
						var stylist_OK = false;
						var service_OK = false;
						var instructions_OK = false;
						var contact_OK = false;
					
						var errorMsg = "Please make sure you take care of the following:\n";

						var goColor = '#445135';//buleish
						var noColor = '#ff0000';//red
						var manipOptions = [goColor,noColor,false];
						
						nameElems = [$('#aFullName_label'),$('#aFullName')];
						compareType = ['aFullName'];
						nameMsgs = [errorMsg,'-Enter your full name.\n'];
						nameCheck = inputCheck(nameElems,compareType,nameMsgs,manipOptions);
						name_OK = nameCheck[0];
						errorMsg = nameCheck[1];
						
												
						emailElems = [$('#anEmailAddress_label'),$('#anEmailAddress')];
						compareType = ['anEmailAddress'];
						emailMsgs = [errorMsg,'-Enter your Email or Number.\n'];
						emailCheck = inputCheck(emailElems,compareType,emailMsgs,manipOptions);
						email_OK = emailCheck[0];
						errorMsg = emailCheck[1];
						
												
						phomeElems = [$('#aContactNumber_label'),$('#aContactNumber')];
						compareType = ['aContactNumber'];
						phoneMsgs = [errorMsg,'-Enter your Number or Email.\n'];
						phoneCheck = inputCheck(phomeElems,compareType,phoneMsgs,manipOptions);
						phone_OK = phoneCheck[0];
						errorMsg = phoneCheck[1];
						
						
						compareSelectText = ['--Please Choose--'];
						stylistElems = [$('#visit_stylist')];
						stylistMsgs = [errorMsg,'-Choose your Stylist...\n'];
						stylistCheck = selectCheck(stylistElems,compareSelectText,stylistMsgs,manipOptions);
						stylist_OK = stylistCheck[0];
						errorMsg = stylistCheck[1];

						serviceElems = [$('#visit_services')];
						serviceMsgs = [errorMsg,'-Choose your Service...\n'];
						serviceCheck = selectCheck(serviceElems,compareSelectText,serviceMsgs,manipOptions);
						service_OK = serviceCheck[0];
						errorMsg = serviceCheck[1];

						instructionInput = $('#textarea_instructions');
						instructionInputValue = instructionInput.attr('value');
						if(instructionInputValue == ''){
							instructionInput.attr('value','Please contact me at my preferred contact method to discuss my next appointment... Thanks!');
							instructions_OK = true;
						}else if (instructionInputValue != ''){
							instructions_OK = true;
						}

						emailChk = $('input#chk_anEmailAddress');
						phoneChk = $('input#chk_aContactNumber');
						if(email_OK && !phone_OK){
							emailChk.attr('checked',true);
							phoneChk.attr('checked',false);
							contact_OK = true;
							$('div.chk_label').css('color',goColor);
						}else if(!email_OK && phone_OK){
							phoneChk.attr('checked',true);
							emailChk.attr('checked',false);
							contact_OK = true;
							$('div.chk_label').css('color',goColor);
						}else if(!email_OK && !phone_OK){
							phoneChk.attr('checked',false);
							emailChk.attr('checked',false);
							$('div.chk_label').css('color','red');
							errorMsg += "-Choose preferred contact method/s.";
						}else if(email_OK && phone_OK){
							if(emailChk.attr('checked') == false && phoneChk.attr('checked') == false){
								$('div.chk_label').css('color','red');
								errorMsg += "-Choose preferred contact method/s.";
							}else if(emailChk.attr('checked') == true && phoneChk.attr('checked') == true){
								phoneChk.attr('checked',false);
								emailChk.attr('checked',false);
								$('div.chk_label').css('color','red');
								errorMsg += "-Choose preferred contact method/s.";
							}else if(emailChk.attr('checked') == true || phoneChk.attr('checked') == true){
								$('div.chk_label').css('color',goColor);
								contact_OK = true;
							}
						}

						if(email_OK || phone_OK){
							if(name_OK && stylist_OK && service_OK && instructions_OK && contact_OK){
								return true;
							}else{
								alert(errorMsg);
								return false;
							}
						}else{
							if(errorMsg != 'Please make sure you take care of the following:\n'){
								alert(errorMsg);
								return false;
							}else{
								return true;
							}
						}
					});
				});
	   			thisBackground = 'transparent url(images/Popups/Textures-Salon-Popup-Titles-Appointments.png) no-repeat scroll -80px 6px';
	   		}else if(elId.indexOf('training') > -1){
   				$jsonDoc = 'assets/' + 'html-training.html';
				$('div.popup_content_inner').load($jsonDoc,function(data){
					$infoHolder = $('div.popup_content_outer');
					$infoHolder.css({
						'background-color':'#fff'
						});
					$('div.popup_content_inner h2').css({
						'font-size':'16px',
						'font-weight':'bold',
						'color':'#5e6c67',
						'margin':'30px 0 0 30px',
						'width':'90%'
						});
				
					$('div.popup_content_inner p').css({
						'font-size':'14px',
						'line-height':'18px',
						'color':'#47534f',
						'margin':'10px 0 0 30px',
						'width':'90%'
						});
				});
	   			thisBackground = 'transparent url(images/Popups/Textures-Salon-Popup-Titles-Training.png) no-repeat scroll -80px 6px';
	   		}else if(elId.indexOf('bios') > -1){
   				$jsonDoc = 'assets/' + 'html-bios.html';
				$('div.popup_content_inner').load($jsonDoc,function(data){
					$infoHolder = $('div.popup_content_outer');
					$infoHolder.css({
						'background-color':'#fff'
						});
				});
	   			thisBackground = 'transparent url(images/Popups/Textures-Salon-Popup-Titles-Bios.png) no-repeat scroll -80px 6px';
	   		}
	   		
			var cssObj = {'background' : thisBackground};
			$('div.popup_title').css(cssObj);
		loadPopup();   	
		centerPopup();
   }).hover(function () {  
		//Since its a sprite with "two" spots, its easier to change css to obtain the rollover positions
	    var cssObj = {'background-position':'0px -89px'}
		$(this).css(cssObj);
	}, function () {
      	var cssObj = {'background-position':'0px 0px'}
		$(this).css(cssObj);
	});
	
	$('div.popup_close').click(function(){
		disablePopup();
	});


/*---------------------------------------------------------------------------
NAVIGATION HOVER - since its a sprite with "multiple" spots, its easier to swap classes to obtain the rollover positions
*/
   $('div.mainnav_inner li').hover(function () {
		currId = $(this).attr('id');
		$(this).addClass(currId + '-on');
		$(this).removeClass(currId);
    }, function () {
		currId = $(this).attr('id');
		$(this).removeClass(currId + '-on');
		$(this).addClass(currId);
    });

	$productEls = $('#content_products');
	$productEls.find('li').hover(
		function(){
			$(this).css({'background-position':'0px -183px'});
		},
		function(){
			$(this).css({'background-position':'0px 0px'});
	});
});





function inputCheck(elOpts,compOpts,retOpts,doOpts){

	aLabel = elOpts[0];
	anInput = elOpts[1];
	aValue = anInput.attr('value');
	
	goColor = doOpts[0];
	noColor = doOpts[1];
	item_OK = doOpts[2];
	
	aPattern = compOpts[0];
	
	errOrig = retOpts[0];
	errThis = retOpts[1];
	
	if(aValue != '' && checkPattern(aValue,aPattern) == true){
		item_OK = true;
		aLabel.css({color:goColor});
	}else{
		errOrig += errThis;
		aLabel.css({color:noColor});
	}
	return[item_OK,errOrig];
}


function selectCheck(elOpts,compOpts,retOpts,doOpts){

	origText = compOpts[0];
	anObj = elOpts[0];
	anObjText = anObj.find('option:selected').text();
	anObjParent = anObj.parent();
	aTitleDiv = anObjParent.find('div');
	
	goColor = doOpts[0];
	noColor = doOpts[1];
	item_OK = doOpts[2];
		
	errOrig = retOpts[0];
	errThis = retOpts[1];

	if (anObjText == origText){
		errOrig += errThis;
		aTitleDiv.css('color', noColor);
	}else{
		item_OK = true;
		aTitleDiv.css('color',goColor);
	}
	return[item_OK,errOrig];
}


function checkPattern(aStr,aPattern){
	var aPat = '~NA~';
	switch(aPattern){
		case 'aFullName': aPat =  /^([1-zA-Z0-1@.\s]{1,255})$/; break;
		case 'aContactNumber': aPat =  /^(\(?\d\d\d\)?)?( |-|\.)?\d\d\d( |-|\.)?\d{4,4}(( |-|\.)?[ext\.]+ ?\d+)?$/; break;
		case 'anEmailAddress': aPat =   /(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})/; break;
		default: 'NULL';
	}

	if (aStr.match(aPat)) {
   		return true;
 	} else {
 		return false;
 	}

}



//alert('-:$jsonDoc:-' + 'y');
function loadDATAservices(jsonProps){
	htmlALL = "<dl>";
	for(i=0;i<jsonProps.services.length;i++){
		aServiceKind = jsonProps.services[i].kind;
		htmlALL += mkHTMLElem(aServiceKind,["<dt>","</dt>"]);
		htmlALL += "<dd><table><tr>";
		aServiceType = jsonProps.services[i].type;
		for(j=0; j<aServiceType.length; j++){
			htmlALL += "<tr>";
			aServiceTypeDescription = aServiceType[j].description;
			htmlALL += mkHTMLElem(aServiceTypeDescription,["<td>","</td>"]);
			aServiceTypePricing = aServiceType[j].pricing;
			htmlALL += mkHTMLElem(aServiceTypePricing,["<td>","</td>"]);
			htmlALL += "</tr>";
		}
		htmlALL += "</table></dd>";
	}
	htmlALL += "</dl>";
	return htmlALL;
}

function mkHTMLElem(ofString,withTags){
	return (withTags[0] + ofString + withTags[1]);
}



function mkRandNumArr(pgPicCount,dirImgCount){
	randNumArr = new Array();
	do {
		randNum = Math.floor(Math.random() * dirImgCount);
		if (randNumArr.indexOf(randNum) == -1){
			randNumArr.push(randNum);
		}
	}
	while (randNumArr.length < pgPicCount);
	return randNumArr;
}

/*---------------------------------------------------------------------------
WORK AROUND IE non support of indexOf method
*/
Array.prototype.find = function(searchStr) {
  var returnArray = false;
  for (i=0; i<this.length; i++) {
    if (typeof(searchStr) == 'function') {
      if (searchStr.test(this[i])) {
        if (!returnArray) { returnArray = [] }
        returnArray.push(i);
      }
    } else {
      if (this[i]===searchStr) {
        if (!returnArray) { returnArray = [] }
        returnArray.push(i);
      }
    }
  }
  return returnArray;
}

//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license

if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length;

    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}