var boxes = [];
boxes[boxes.length] = {
name: 'bottom',
id: 1,
height:200,
width:800,
left:0,
top:300,
grow: function(){
	
	$('#carimg').animate({width:'300px'}, 500);

	$('#enlargeimgCar').fadeOut(500);
	
        
},
ungrow: function(){
	$('#carimg').animate({width:'200px'}, 400);

	$('#enlargeimgCar').fadeIn(500);
}
};


boxes[boxes.length] = {
name: 'contact',
id: 2,
height:150,
width:400,
left:400,
top:150,
grow: function(){
	$('.infoBox').unbind('click', boxClickEvent);
},
ungrow: function(){
	$('.infoBox').click(boxClickEvent)
}


};

boxes[boxes.length] = {
name: 'about left',
id: 3,
height:300,
width:400,
left:0,
top:0,
grow: function(){
    $('#map #mapimg').animate(
    {
        width:250
    }, 600);
        $('#map').animate(
    {
        right:150
    }, 600);
     $('#map #enlargeimg').fadeOut(500);
},
ungrow: function(){
    $('#map #mapimg').animate(
    {
        width:150
    }, 600);
    $('#map').animate(
    {
        right:30
    }, 600);
    $('#map #enlargeimg').fadeIn(500);
}
};

boxes[boxes.length] = {
name: 'top right',
id: 4,
height:150,
width:400,
left:400,
top:0,
grow: function(me){
    me.find('.enlargeimg').fadeOut(500);
},
ungrow: function(me){
    me.find('.enlargeimg').fadeIn(500);
}
};

growToParams = {
            width:700,
            height:500,
            top:-50,
            left:50
        };
var activeBox = -1
var nextActive;
var boxClickEvent = function(event) {
    requestGrow(parseInt(event.currentTarget.id.substr(7,1)) - 1);
	
}
function grow(id, up){
    if (up){
        params = growToParams
    }else
    {
        params = {
            width: boxes[id].width,
            height:boxes[id].height,
            top:boxes[id].top,
            left:boxes[id].left
        }
    }
        
    var box = $('#infoBox' + (id + 1));
	box.animate(params, 700);
    if (up)
    {
        var i = 0;
        setZindex(-1);
        $('#shadow').css('z-index', 0);
        box.css('z-index', 1);
        setTimeout(function(){
            box.find('.content')
                .addClass('grown')
                .removeClass('main')                
                box.find('.shrinkbtn').fadeIn(300)
            boxes[id].grow(box);
        }, 500)
    }
    else   
    { 
        box.find('.shrinkbtn').fadeOut(200);
        boxes[id].ungrow(box);        
        $('#shadow').fadeOut(300);
       
        setTimeout(function(){
            $('#shadow').css('z-index', -1);
            box.find('.content').addClass('main').removeClass('grown');  
           
            setZindex(0);	
        }, 950);       
    }
}

function setZindex(value){
    for (i = 0;i < boxes.length; i++){
        $('#infoBox' + boxes[i].id).css('z-index', value); 
    }	
}

function requestGrow(a, callback){
    if (callback == undefined) callback = function(){};
    
    if (activeBox != -1 && activeBox != -2){    
        grow(activeBox, false);
        activeBox = -2
        setTimeout(function(){activeBox = -1; callback();}, 1000);
        fadeIt();
    }
    else if (activeBox != -2 && a != -1)
    {
        activeBox = -2
        grow(a, true);
        nextActive = a;
        setTimeout(function(){activeBox = nextActive; callback();}, 1000);
        fadeIt();
    };
    
}

function setBoxes(){
    if (!slowVersion){
        placeImages();
        var i = 0;
        while (i < boxes.length){
            $('#infoBox' + boxes[i].id).animate({
                width: boxes[i].width,
                height: boxes[i].height,
                left: boxes[i].left,
                top: boxes[i].top
			
            }, 1000)
            i++;
        }
        $('.infoBox').click(boxClickEvent)
        setZindex(0);
    }
}

function fadeIt(){
    if ($('#shadow').css('opacity') != shadowVal)
        $('#shadow').animate({
            opacity: shadowVal
        }, 1000);
    else {
        $('#shadow').animate({
            opacity: 0
        }, 1000);
        
    }
}

function placeImages(){

    for (i = 0;i < boxes.length; i++){
        var html = $('div .infoBox')[i].innerHTML;
        $('div .infoBox')[i].innerHTML = '<a href="javascript:requestGrow(-1)"><img src="images/shrink.png" alt="Shrink Me" class="shrinkbtn"></a><div class="infoboxtop">&nbsp;</div><div class="infoboxbottom">&nbsp;</div>        <div class="infoboxleft">&nbsp;</div>        <div class="infoboxright">&nbsp;</div>        <div class="infoboxBG">&nbsp;</div>        <div class="infoboxtopleft"><img src="images/box_top_left.png"></div>        <div class="infoboxtopright"><img src="images/box_top_right.png"></div>        <div class="infoboxbottomright"><img src="images/box_bottom_right.png"></div>        <div class="infoboxbottomleft"><img src="images/box_bottom_left.png"></div>' + html;
    }
}

function sendmail(){
    var data = {
        name: $('#name').val(),
        contact: $('#contact').val(),
        quest: $('#quest').val(),
		brows: navigator.appName
    }
	if (data.contact == '') alert("Contact field cannot be blank");
	var conType = '';
	filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-._]))+\.([a-zA-Z0-9]{2,4})+$/;
	if (filter.test(data.contact)){
		conType = 'email';
	}
	else
	{
		//it's a phone number or a wrong email
		filter = /^(\d*)$/;
		
		if (filter.test(data.contact)){
			//is a phone number
			filter = /^(\d{11})$/;
			if (!filter.test(data.contact)){
			
				alert('Phone Number should be 11 numbers long (Don\'t forget your Area Code)');
			}else conType = 'phone';	
		}else {alert('Invalid E-mail address, Check your spellings or leave your phone  number instead.'); }
	}
	
	if (conType != ''){
		data.contype = conType;
		$.post('php/mail.php', data, function(ret, textType){

			if (ret.sent == true){
				$('#emailformcover').fadeIn(500);
				requestGrow(-1);
			}else {
				if (ret.desc == 'soon') alert("Warning: E-mail has not been sent, as one has already been sent by you in the last 10 minuites");
			}
		}, 'json');
	}
}