function marquee_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();
    });
};

// set dots...
function setDotsForMarquee(carousel, item, idx, state)
{
	setCarouselDots('marquee', idx, 5);

};

// sort out 7/15/23...
function setThreeDots(id, idx)
{
	if (idx == 7) {
		idx = 1;
	}

	if (idx == 15) {
		idx = 2;
	}

	if (idx == 23) {
		idx = 3;
	}

	setCarouselDots(id, idx, 3);

}

function setDotsForCd(carousel, item, idx, state)
{
	// count on 7 | 15 | 23...
	if (idx == 7 || idx == 15 || idx == 23) {
		setThreeDots('cd', idx);
	}
};

function setDotsForDvd(carousel, item, idx, state)
{
	if (idx == 7 || idx == 15 || idx == 23) {
		setThreeDots('dvd', idx);
	}
};

function setDotsForBook(carousel, item, idx, state)
{
	if (idx == 7 || idx == 15 || idx == 23) {
		setThreeDots('book', idx);
	}
};

/**
 * function: set the points...
 *
 * @param str id    the id of carousel
 * @param int idx   the index of item
 * @param int total total dots...
 *
 * @return void
 */
function setCarouselDots(id, idx, total)
{
//	console.log('we need to change the dots for #' + id + ' to highlight on item:' + idx);
	var dotsHtml= '<ul class="dots">';
	for (var i = 1; i <= total; i++) {
		// construct it...
		dotsHtml += '<li';

		if (i == idx) {
			dotsHtml += ' class="active"';
		}

		dotsHtml += '></li>';
	}

	dotsHtml += '</ul>';
	$('#dots_' + id).html(dotsHtml);

};// end setCarouselDots

function closeOverlay() {
	var overlay = $('#shop_overlay');
	var mask = $('#shop_overlay_mask');
	mask.fadeOut('fast');
	overlay.fadeOut('fast',function(){
		mask.remove();
		overlay.remove();
		// do stuff if needed
	});
}

function zoomImg(width, height, src) {

	var type = '<img width="'+width+'" height="'+height+'" src="'+src+'" />';
	console.log(src);

	if ($('#shop_overlay_mask').length==0){
		$('body').append('<div id=\'shop_overlay_mask\'></div><div id=\'shop_overlay\'><div id=\'shop_overlay_close\'></div><div id=\'shop_overlay_content\'>'+type+'</div></div>');
		$('#shop_overlay_close, #shop_overlay_mask').click(function(){closeOverlay();});
	}

	// SET INNER BASED ON TYPE
	var overlay = $('#shop_overlay');


	// SHOW (EXTRA BITS NEEDED 'IE SUCKS')
	var top_pos = $(window).scrollTop() - (parseFloat(overlay.css('height'))/2);
	$('#shop_overlay_mask').css({'height':$(document).height(),'display':'block','opacity':'0'}).animate({opacity:'.5'},'fast');

	var scrollFix = $(document).scrollTop();
	var fixImgY = height/2;
	var fixImgX = width/2;
	var adjZoom;
	var pN;

	if (scrollFix <= fixImgY) {
		pN = '-';
		adjZoom = (fixImgY - scrollFix);
	} else {
		pN = '';
		adjZoom = scrollFix - fixImgY;
	};


	overlay.fadeIn('fast').css({'marginTop': pN + adjZoom+'px','margin-left':'-'+fixImgX+'px'});

	return false;
}

//ATTACH OVERLAYS
function attachOverlays() {

	$('a#overlay_1').click(function () {
		// CHECK IF OVERLAYS EXISTS
		var a = $(this).attr('href');
		var type = $(document).find(a).html();

		if ($('#shop_overlay_mask').length==0){
			$('body').append('<div id=\'shop_overlay_mask\'></div><div id=\'shop_overlay\'><div id=\'shop_overlay_close\'></div><div id=\'shop_overlay_content\'>'+type+'</div></div>');
			$('#shop_overlay_close, #shop_overlay_mask').click(function(){closeOverlay();});
		};

		// SET INNER BASED ON TYPE
		var overlay = $('#shop_overlay');


		// SHOW (EXTRA BITS NEEDED 'IE SUCKS')
		var top_pos = $(window).scrollTop() - (parseFloat(overlay.css('height'))/2);
		$('#shop_overlay_mask').css({'height':$(document).height(),'display':'block','opacity':'0'}).animate({opacity:'.5'},'fast');

		overlay.fadeIn('fast');//.css('marginTop','-192px')

		return false;
	});
}


$(document).ready(function() {
	// load first marquee by ajax...
	attachOverlays();
	$('#top_marquee_container').load(baseUrl + '/Ajax/get-marquees', {rnd:1}, function (responseText, textStatus, XMLHttpRequest) {
		$('#marquee').jcarousel({ scroll: 1, auto: 7, wrap: 'last', initCallback: marquee_initCallback,
			itemVisibleInCallback: {
	            onAfterAnimation:  setDotsForMarquee
	        }
		});

	    // other marquees...
		$('#dvd').jcarousel({ scroll: 8, itemVisibleInCallback: {
	            onAfterAnimation:  setDotsForDvd
	        } });
		$('#cd').jcarousel({ scroll: 8, itemVisibleInCallback: {
	            onAfterAnimation:  setDotsForCd
	        } });
		$('#book').jcarousel({ scroll: 8, itemVisibleInCallback: {
	            onAfterAnimation:  setDotsForBook
	        } });
	});
});