var init = function() {
    var contactSlidingPanelHeight = $("#contact_sliding_panel").height();
    $("#contact_sliding_panel").css({
        "height": contactSlidingPanelHeight
    });
    var contactMaskHeight = $("#contact_mask").height();
    $("#contact_mask").css({
        "height": "425px",
        "overflow": "hidden"
    });

    $("#contact_form").show();
    $("#contact_form_thankyou").hide();

    $("#contact_form").prepend('<p><a href="#" id="contact_details_btn">&laquo; Back to Contact Details</a></p>');

    $("#contact_form_btn").click(contactFormControl);
    $("#contact_details_btn").click(contactDetailsControl);
    $("#submit").click(submitControl);

    $("#contact_form_submit").submit(function() {
        $(".error").hide();
        var hasError = false;
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        var nameVal = $("#Name").val();
        if (nameVal == '') {
            $("#Name").after('<span class="error">Please enter your name.</span>');
            hasError = true;
        }

        var commentsVal = $("#Comments").val();
        if (commentsVal == '') {
            $("#Comments").after('<span class="error">Please enter a comment.</span>');
            hasError = true;
        }

        var emailVal = $("#Email").val();
        if (emailVal == '') {
            $("#Email").after('<span class="error">Please enter your email address</span>');
            hasError = true;
        } else if (!emailReg.test(emailVal)) {
            $("#Email").after('<span class="error">Enter a valid email address.</span>');
            hasError = true;
        }

        if (hasError == false) {
            var url = "/CylinderContact.ashx";
            $.ajax({
                type: "POST",
                cache: false,
                url: url,
                data: $("#contact_form_submit").serialize(),
                error: function(xhr, err) {
                    //                alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                    //                alert("responseText: " + xhr.responseText);
                    //                alert(err);
                },
                success: function(response) {
                    if (response && response == "OK") {
                        $("#contact_form").hide();
                        $("#contact_form_thankyou").prepend('<p><a href="#" id="contact_details_btn">&laquo; Back to Contact Details</a></p>');
                        $("#contact_form_thankyou").show();
                    }
                }
            });
        }
        return false;
    });
}
	
	//slide to show contact form
	var contactFormControl = function() {
		$('#contact_sliding_panel').animate({
			"marginTop": "-440px"
		},300)
		return false;
	}
	
	//slide to show contact info
	var contactDetailsControl = function() {
		$('#contact_sliding_panel').animate({
			"marginTop": "0"
		},300)
		return false;
	}
	
	//validate form
	var submitControl = function() {
	    $(".error").hide();
	    var hasError = false;
	    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

	    var nameVal = $("#Name").val();
	    if (nameVal == '') {
	        $("#Name").after('<span class="error">Please enter your name.</span>');
	        hasError = true;
	    }

	    var commentsVal = $("#Comments").val();
	    if (commentsVal == '') {
	        $("#Comments").after('<span class="error">Please enter a comment.</span>');
	        hasError = true;
	    }

	    var emailVal = $("#Email").val();
	    if (emailVal == '') {
	        $("#Email").after('<span class="error">Please enter your email address</span>');
	        hasError = true;
	    } else if (!emailReg.test(emailVal)) {
	        $("#Email").after('<span class="error">Enter a valid email address.</span>');
	        hasError = true;
	    }
	    return false;
	}
	
	//back button for gallery
	var BackButtonControl = function() {
		//$('#gallery').animate({"opacity": 1.0}, 300);
		$('#sliding_panel').animate({"marginLeft": "0"}, 300);
		return false;
	}

	//Load Page Dynamically

	var externalPageLoader = {
	
		init: function() {
			//$('.main_content').attr('id','dynamic_content');
			$('#canvas_holder').append('<span id="load"></span>');
		},
		
		controller: function() {
		  
			$('#gallery li a').click(function(){
				
				var toLoad = $(this).attr('href')+' #dynamic_content';
				$('#canvas').hide('fast',loadContent);
				$('#sliding_panel').animate({"marginLeft": "-580px"}, 300);
				//$('#gallery').animate({"opacity": 0}, 300);
				
				$('#load').fadeIn(250);
								
				function loadContent() {
					$('#canvas').load(toLoad,'', function() {
						showNewContent(); 
						slideGallery.init(true); 
						slideGallery.controller(); 
						$('#back').click(BackButtonControl);
						var url = "";
						var url = $("#url").attr("href");
						$('#view').attr({"href":url, "target":"_blank"});
					})
				}
				function showNewContent() {
					$('#canvas').fadeIn(500, function() {$('#load').animate({"opacity": 1.0}, 250).fadeOut(250);});
					
					
				}
				return false;
				
			});
		
		}
	}	
	
	//Animate Gallery Image on Hover
	animateGalleryThumbnail = function() {
	
		$(".project").each( function(i) {
			var index = $(".project").index(this);
			var id = "project_thumbnail_"+index;
			$(this).attr("id",id);
			var alt = $(this).find("img").attr("alt");
			$(this).find("img")
			.wrap('<div class="image_mask"></div>')
			.after('<div class="border"></div><div class="view">'+alt+'</div>')
		})
	
		$("li.project .border").animate({
			"borderWidth": "16px",
			"width": "157px",
			"height": "136px"
		})
		.animate({
			"borderWidth": "8px",
			"width": "174px",
			"height": "152px"
		}, 300);
		$("li.project .view").animate({
			'top': "168px"
		})
	
		$('li.project').hover( 
			function() {
				var borderEl = "#"+$(this).attr("id");
				$(borderEl+" .border").animate({
					"borderWidth": "16px",
					"width": "157px",
					"height": "136px"
				}, {queue: false, duration: 300})
				$(borderEl+" .view").animate({
					"opacity":0
				}, 250)
				var viewHeight = 138-($(borderEl+" .view").height()+15);
				$(borderEl+" .view").animate({
					"opacity": 0.8,
					'top': viewHeight
				},200);
			},
			function() {
				var borderEl = "#"+$(this).attr("id");
				
				if($(borderEl+" .border").is(':animated')) {
					$(borderEl+" .view").stop().animate({
						'opacity':0, 
						'top': "168px"
					}, 150 );
				} else {
					$(borderEl+" .view").animate({
						'opacity':0, 
						'top': "168px"
					}, {queue: false, duration: 300});
				}
				$(borderEl+" .border").animate({
					"opacity": 1.0
				}, 200)
				.animate({
					"borderWidth": "8px",
					"width": "174px",
					"height": "152px"
				}, 300);
		
			}
		)
	}
	
	//variables for service section
	var item = $('.service');
	var minWidth = 65;
	var maxWidth = 135;
	var minHeight = 20;
	var maxHeight = 180;
	var lastID = '#design';
	var services = {
		
		//services initialisation
		init: function() {
			$('#services_content').css({'height':'200px', 'overflow':'hidden'});
			item.css({
				'width': minWidth+'px',
				'height': minHeight+'px'
			});
			//hide content
			item.find('h2').next().css('opacity',0);
			services.setItem(lastID);
		},	
		
		//services section toggle
		setItem: function(parent) {
			var lastBlock = $(lastID);	
			//hide service
			lastBlock.animate(
				{'width': minWidth+'px'}, 
				{ queue:false, duration:400 }
			)
			.animate(
				{'opacity': 1.0},100
			)
			.animate(
				{'height': minHeight+'px','opacity': 1.0},
				{ queue:false, duration:200 }
			)
			lastBlock.find('ul').animate(
				{'opacity': 0},
				{ queue:false, duration:100 }
			)
			
			//show cservice
			$(parent).animate(
				{'width': maxWidth+'px'}, 
				{ queue:false, duration:400 }
			)
			.animate(
				{'opacity': 1.0},200
			)
			.animate(
				{'height': maxHeight+'px','opacity': 0.8 }, 
				400
			)
			.find('ul').animate(
				{'opacity': 1.0},
				250
			);
			//store last item clicked
			lastID = parent;
		},
		
		//callback function for each button
		controller: function() {
			item.find('h2').click( function(){
				var parent = '#'+$(this).parent().attr("id");
				services.setItem(parent);
			});	
		}
	
	}
	
	//portal slider
	portalSlider = function() {
		$("#portal_controller").jFlow({
			slides: "#portal_elements",
			controller: ".portal_btn", // must be class, use . sign
			slideWrapper : "#portal_slider", // must be id, use # sign
			selectedWrapper: "active",  // just pure text, no sign
			width: "310px",
			height: "615px",
			duration: 400
		});
		$("#portal_controller a").click( function() { return false; });
	}


	//random image loader
	randomBackground = function() {
		var totalBackgroundImages = 5;
		randomNumber = Math.floor( Math.random() * totalBackgroundImages );
		var backgroundClass = 'randomImage'+randomNumber
		$('body').addClass(backgroundClass);
	}
	
	//google maps
	googleMap = function(){
		var map = new GMap2(document.getElementById('map'));
		var burnsvilleMN = new GLatLng(85.014402,145.634766);
		map.setCenter(burnsvilleMN, 8);
		var point = new GLatLng(37.830332,144.994204);
		marker = new GMarker(point);
		map.addOverlay(marker);
	}		
	
	$(document).ready(function(){
		init();
		randomBackground();
		animateGalleryThumbnail();
		portalSlider();
		$('.tabify').tabify();
		services.init();		
		services.controller();
	//	googleMap();
		externalPageLoader.init();
		externalPageLoader.controller();
	});
	
	var so = new SWFObject("swf/Bold.swf", "BoldTxt", "920", "139", "9");
	so.addParam("wmode", "transparent");
	so.write("bold");