// That code snippet belongs to Citizen Design - http://citizen-design.com

$( document ).ready( function(){
	
	var i = 0;
	$('.your-goals a').each( function(){
		this._index = i;
		i++;
	});
	
	var goals_current_index = 0;
	var goals_interval;
	$('.your-goals a').mouseover( function(){
		var index = this._index;
		
		if ( goals_current_index == index ) return;
		
		window.clearTimeout( goals_interval );
		goals_interval = window.setTimeout( function(){
			$('.your-goals a').removeClass('active');
			$( this ).addClass('active');
			$('.all-goals-content .goal-content').hide();
			$('.all-goals-content .goal-content:eq('+index+')').fadeIn('dev');
			goals_current_index = index;
		}, 100);
		
	});
	
	$('a.shadow-frame')
		.mouseover( function(){
			var ex_title = $(this).attr('title').split(';');
			var client = typeof(ex_title[0]) != 'undefined' ? ex_title[0] : '';
			var project = typeof(ex_title[1]) != 'undefined' ? ex_title[1] : '';
			var citizen = typeof(ex_title[2]) != 'undefined' ? ex_title[2] : '';
			
			$('#info-client').html( client );
			$('#info-project').html( project );
			$('#info-citizen').html( citizen );
		})
		.mouseout( function(){
			$('#info-client').html('');
			$('#info-project').html('');
			$('#info-citizen').html('');
		});
	
	if ( $( '#portfolio-carousel' ).length > 0 ) {
		$( '#portfolio-carousel' ).jcarousel({
			//auto: 5,
			scroll: 5,
			animation: 'dev',
			wrap: 'null'
			//,			initCallback: mycarousel_initCallback
		});
	}
	
	$('a.percent')
		.mouseover( function(){
			var li = $( this ).parent();
			var ul = li.parent();
			ul.find('.balloon').hide();
			li.find('.balloon').fadeIn('dev');
		})
		.mouseout( function(){
			var li = $( this ).parent();
			var ul = li.parent();
			ul.find('.balloon').hide();
		});
		
	if ( $('#white-screen').length > 0 ) {
		var h = $( 'body' ).height() > $( window ).height() ? $( 'body' ).height() : $( window ).height();
		$('#white-screen').css({ 'height': h });
	}
	
	/** Lightbox **/
	
	$('a.shadow-frame').click( function(){
		var info = get_project_info( $( this ).attr('title') );
		var project_url = $( this ).parent().find('.project_url').attr('href');
		var big_img = $( this ).attr('href');
		var right_img = big_img.split('.');
		right_img[right_img.length-2] = right_img[right_img.length-2] + '_right';
		right_img = right_img.join('.');
		
		var content_html = '';
		content_html += '<div class="left"><img src="' + big_img + '" alt="" /></div>';
		content_html += '<div class="right">';
		content_html += '<img src="' + right_img + '" alt="" />';
		content_html += '<div class="project-info">';
		content_html += '<a href="' + project_url + '" class="view-site" target="_blank">view live site</a>';
		content_html += '<h3>'+info['project']+'</h3>';
		content_html += '<div class="cl">&nbsp;</div>';
		content_html += '<div class="client-info"><h5>clients:</h5><p>'+info['client']+'</p></div>';
		content_html += '<div class="role-info"><h5>Role:</h5><p>'+info['citizen']+'</p></div>';
		content_html += '<div class="cl">&nbsp;</div></div></div>';
		
		var lightbox_html = '<a href="#" class="close" onclick="close_lightbox(); return false;">Close</a><div class="lightbox-top">&nbsp;</div><div class="lightbox-center"><div class="lightbox-content"><div class="cl">&nbsp;</div><div id="lightbox-cnt"><div class="cl">&nbsp;</div>' + content_html + '<div class="cl">&nbsp;</div></div></div></div><div class="lightbox-bottom">&nbsp;</div>';
		
		
		if ( $.browser.safari ) {
			var offset = $('body').scrollTop();
		}else {
			var offset = document.documentElement.scrollTop;
		}
		
		$( '#lightbox' ).html( lightbox_html ).css({ 'top': offset+20 });
		
		open_window( '#lightbox' );
		
		return false;
	});
	
	
	
	/** SIFR **/
	
	$('.welcome-sifr').sifr({
		font: 'helvetica_neue_lt_more_line_height',
		path: 'fonts'
	});
	$('.feature-links a').sifr({
		font: 'helvetica_neue_bold',
		hover: '#ff9e5d',
		path: 'fonts'
	})
	
});

function close_lightbox() {
	close_window( '#lightbox' );
	$('#lightbox').html( '' );
}

function get_project_info( s ) {
	var ex_string = s.split(';');
	var info = {};
	info['client'] = typeof(ex_string[0]) != 'undefined' ? ex_string[0] : '';
	info['project'] = typeof(ex_string[1]) != 'undefined' ? ex_string[1] : '';
	info['citizen'] = typeof(ex_string[2]) != 'undefined' ? ex_string[2] : '';
	return info;
}

String.prototype.isValidEmail = function() { return (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(this));};
$(function () {
    $('form.should-validate').submit(function () {
        reqs = $('.required', this);
        
        for (var i=0; i < reqs.length; i++) {
            var f = $(reqs[i]);
            var err = '';
            var choose = 'enter';
            var tag = f.get(0).tagName.toLowerCase();
            
            if ( tag == 'select') choose = 'select';
            
            if (f.attr('value')=='') {
                err = "Please, " + choose + " " + $('label[for=' + f.attr('id') + ']').text().replace(/:?\s*\*\s*$/, '').toLowerCase();
            }
            if (f.hasClass('valid-mail') && !f.attr('value').isValidEmail()) {
                err = "Please, enter valid e-mail address.";
            }
            if (err.length) {
                alert(err);
                f.focus();
                return false;
            }
        }
        
        submit_form();
        return false;
    });
});

function submit_form() {
	
	var params = {};
	
	$('.contact-form label').each( function(){
		var id = $( this ).attr('for');
		params[ $(this).html() ] = $('#' + id).attr('value');
	});
	
	
	$.post('mail.php', params, function(){
		open_window( '#thank-you' );
		$('#thank-you .close').click( function(){
			close_window( '#thank-you' );
			return false;
		});
		$('.contact-form .field, .contact-form textarea').attr({'value' : ''});
	});
}

function open_window( id ) {
	$( '#white-screen' ).show().css({ 'opacity': 0 });
	$( '#white-screen' ).fadeTo( 'dev', 0.5, function(){
		$( id ).show();
	});
}
function close_window( id ) {
	$( id ).hide();
	$( '#white-screen' ).fadeTo( 'dev', 0, function(){
		$( this ).hide();
	});
	return false;
}


function mycarousel_initCallback(carousel) {
// Disable autoscrolling if the user clicks the prev or next button.
	carousel.buttonNext.bind('click', function() {
		carousel.startAuto(0);
	});

	carousel.buttonPrev.bind('click', function() {
		carousel.startAuto(0);
	});

	// Pause autoscrolling if the user moves with the cursor over the clip.
	carousel.clip.hover(function() {
		carousel.stopAuto();
		}, function() {
		carousel.startAuto();
	});
};