var fadeid;
var current = 1;
var last = 4;

function loopfade() {
    if (current == 4) {
        current = 1;
        last = 4;
    } else {
        last = current;
        current++;
    }
    
    $('#f'+last).removeClass('f-active');
    $('#f'+current).addClass('f-active');
    
    $('#b'+last).animate({ opacity: 0 }, 1000, function() {
        $('#b'+last).hide();
    });
    
    $('#b'+current).show();
    $('#b'+current).animate({ opacity: 1 }, 1000);
}

$(document).ready(function() {
    $.get( "products/session.php", function (data) {
        $("#items-in-cart").html(data);
    });
    
    $('#b2').hide(); $('#b2').fadeTo(0,0);
    $('#b3').hide(); $('#b3').fadeTo(0,0);
    $('#b4').hide(); $('#b4').fadeTo(0,0);
    fadeid = setInterval("loopfade()", 8000);
    
    $('.f').click(function() {
        var clicked = $(this).attr('id').substr(1,1);
        var old = current;
        current = clicked;
        
        if (old != clicked) {
            // stop animations
            clearInterval(fadeid);
            
            $('#f'+old).removeClass('f-active');
            $('#f'+clicked).addClass('f-active');
            
            // fade out old
            $('#b'+old).animate({ opacity: .3 }, 325, function() {
                
                $('#b'+clicked).show();
                $('#b'+clicked).animate({ opacity: .5 }, 325, function() {
                    $('#b'+old).animate({ opacity: 0 }, 1, function() {
                        $('#b'+old).hide();
                        $('#b'+clicked).animate({ opacity: 1 }, 1, function() {
                            clearInterval(fadeid);
                            fadeid = setInterval("loopfade()", 8000);
                        });
                    });
                });
            });
        }
    });
});


/*
<style type="text/css">
#hp-fade {
    float: left;
    width: 498px;
    height: 302px;
    position: relative;
}

#b1, #b2, #b3, #b4 {
    position: absolute;
    float: left;
}

div.navi {
	float:left;
	position:relative;
	top:268px;
	left:-90px;
	height:14px;
	width:69px;
}

.f {
	width:15px;
	height:14px;
	background:url('assets/images/home-image-nav-btn.png') no-repeat 1px 0;
	display:block;
	cursor:pointer;
	float:left;
	margin:0 1px;
}

.f:hover {
    background-position:-15px 0;
}

.f-active {
	width:15px;
	height:14px;
    background:url('assets/images/home-image-nav-btn.png') no-repeat 1px 0;
    display:block;
	cursor:pointer;
	float:left;
	background-position:-15px 0;   
}
</style>

<div id="hp-fade">
	<img id="b1" src="assets/images/slides/flash-tap-the-power.jpg" />
    <img id="b2" src="assets/images/slides/flash-relieve-stress.jpg" />
	<img id="b3" src="assets/images/slides/flash-promote-healing.jpg" />
	<img id="b4" src="assets/images/slides/flash-create-wellness.jpg" />
</div>
<div class="navi">
    <a class="f f-active" id="f1"></a>
    <a class="f" id="f2"></a>
    <a class="f" id="f3"></a>
    <a class="f" id="f4"></a>
</div>
*/