jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"], {
    random: function (a, i, m, r) {
        if (i == 0) {
            jQuery.jQueryRandom = Math.floor(Math.random() * r.length)
        };
        return i == jQuery.jQueryRandom
    }
});

$(document).ready(function() {
	ramdon();
	clickImage();
});
function behand(){
	var i = 0;
	$('figure img').click(function(){
		i +=1;
		if(i == 3){
			$('.active').removeClass('active');
			$('figure').append('<div id="behance">If you want to know more about us, check our behand</div>');
		}
	});
	$('figure').delegate('#behand', 'click', function(){
		alert('hi');
		$(this).hide();
		ramdon();
	});
	
}

function checkKey(e) {
    switch (e.keyCode) {
    case 37:
        prevBottom();
        break;
    case 39:
        nextBottom();
        break
    }
}

if ($.browser.mozilla) {
    $(document).keypress(checkKey)
} else {
    $(document).keydown(checkKey)
}


function ramdon(){	
	$('figure img').css('cursor','pointer');
	var myWidth=$(window).width();
	var myImg=$('li:random');
	myImg.addClass('active');
	
	if( ($.browser.msie)||(myWidth <= 768) ){
		$('li.active img').addClass('active').css('visibility','visible');
	}else{
		$('li.active img').each(function() {
			if(this.complete){
				$(this).css({
	                opacity: 0,
	                visibility: "visible"
	            }).animate({
	                opacity: 100
	            }, 9000)
			}else{
				$(this).load(function () {
					$(this).css({
						opacity: 0,
						visibility: "visible"
					}).animate({
						opacity: 100
					}, 9000)
				})
			}
		})
	}
}

function clickImage(){
	$('figure img').click(function(){
		nextBottom();
	});
}

function nextBottom() {
    var $active = $('li.active');
    if ($active.length == 0) {
        $active = $('li:last')
    }
    var $next = $active.next().length ? $active.next() : $('li:first');
    $active.addClass('last-active');
    $next.addClass('active');
	$('.active img').css('visibility', 'visible');
    $active.removeClass('active last-active')
}
function prevBottom() {
    var $active = $('li.active');
    if ($active.length == 0) {
        $active = $('li:first')
    }
    var $prev = $active.prev().length ? $active.prev() : $('li:last');
    $active.addClass('last-active');
    $prev.addClass('active');
	$('.active img').css('visibility', 'visible');
    $active.removeClass('active last-active')
}