$(function() {
	$(".i1").click(function() {
		$("#flowpanes").css("height", "315px");
    });

    $(".i2").click(function() {
    	$("#flowpanes").css("height", "315px");
    });

    $(".i3").click(function() {
        $("#flowpanes").css("height", "315px");

    });

    $(".i4").click(function() {
        $("#flowpanes").css("height", "295px");
    });

    $(".i5").click(function() {
        $("#flowpanes").css("height", "330px");
    });

    $(".pointright").click(function() {
    	if($(".i1").hasClass("active")) {
    		$("#flowpanes").css("height", "450px");
            location.href='#home';
    	}
    	
    	if($(".i2").hasClass("active")) {
    		$("#flowpanes").css("height", "465px");
            location.href='#home';
    	}
    	
    	if($(".i3").hasClass("active")) {
    		$("#flowpanes").css("height", "295px");
            location.href='#home';
    	}
    	
    	if($(".i4").hasClass("active")) {
    		$("#flowpanes").css("height", "470px");
            location.href='#home';
    	}
    	
    	if($(".i5").hasClass("active")) {
    		$("#flowpanes").css("height", "300px");
            location.href='#home';
    	}
    });
    
    $.easy.popup();
    
    // select #flowplanes and make it scrollable. use circular and navigator plugins
	var ctrls1 = $("#flowpanes").scrollable({size: 1, clickable: false}).circular();
	ctrls1.navigator({
		// select #flowtabs to be used as navigator
	    navi: "#flowtabs",
	    // select A tags inside the navigator to work as items (not direct children)
	    naviItem: 'a',	
	    // assign "current" class name for the active A tag inside navigator
	    activeClass: 'active'
	 });
	
	ctrls1.navigator({
		// select #flowtabs to be used as navigator
	    navi: "#dots",
	    // select A tags inside the navigator to work as items (not direct children)
	    naviItem: 'a',	
	    // assign "current" class name for the active A tag inside navigator
	    activeClass: 'active'
	 });
});