var r1 = true;
var r2 = true;
var r3 = true;
var r4 = true;
var r5 = true;
var i1 = 0;
var i2 = 0;
var i3 = 0;
var i4 = 0;
var i5 = 0;
var images = ['image_1','image_2','image_3'];
var current = 'image_1';
var setupcomp = false;
var intervalId = null;
//var next = 'image_2';

$(document).ready(function(){
	
	//$('.pthumb img').desaturate();
	
	
	
	$('.thumb').click(function(){
		val = $(this).attr('id').replace("54_","");
		//val.replace('54_','');
		$('.thumb_nav .active img.color').hide();
		$('.thumb_nav .active canvas').show();
		$('.thumb.active').removeClass('active');
		$(this).addClass('active');
		$('.pimg').each(function(){
			if($(this).is(':visible')){
				//$(this).fadeOut();	
				$(this).hide();	
			}
								 });
		$('#'+val).fadeIn();
		setActive();
								   /*
		val = $(this).attr('src').replace("54_","");
		//val.replace('54_','');
		$('.main_image img').attr('src',val);
		$('.thumb img').removeClass('active');
		$(this).addClass('active');*/
		
								   });
	
	$('.pthumb').click(function(){
									
		val = $(this).attr('id').replace("54_","960_");
		//src = $(this).attr('src').replace("54_","960_");
		//val.replace('54_','');
		$('.thumbnav .active img.color').hide();
		$('.thumbnav .active canvas').show();
		$('.pthumb.active').removeClass('active');
		$(this).addClass('active');
		//alert(src);
		
		$('.pimg').each(function(){
			if($(this).is(':visible')){
				$(this).fadeOut();
				//$(this).hide();
			}
								 });
		$('#'+val).fadeIn();
		setActive();
		
								   });
	
	$('#more_products').jcarousel({
        scroll:5,
		visible:5,
		/*wrap:'circular',*/
		animation:1000,
		initCallback: more_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	$('#image_row_1').jcarousel({
        scroll:1,
		visible:3,
		wrap:'circular',
		animation:1000,
		initCallback: image_row_1_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	$('#details_row_1').jcarousel({
        scroll:1,
		visible:3,
		wrap:'circular',
		animation:700,
		initCallback: image_row_1_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	$('#image_row_2').jcarousel({
        scroll:1,
		visible:3,
		wrap:'circular',
		animation:1000,
		initCallback: image_row_2_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	$('#details_row_2').jcarousel({
        scroll:1,
		visible:3,
		wrap:'circular',
		animation:700,
		initCallback: image_row_2_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	$('#image_row_3').jcarousel({
        scroll:1,
		visible:3,
		wrap:'circular',
		animation:1000,
		initCallback: image_row_3_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	$('#details_row_3').jcarousel({
        scroll:1,
		visible:3,
		wrap:'circular',
		animation:700,
		initCallback: image_row_3_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	$('#image_row_4').jcarousel({
        scroll:1,
		visible:3,
		wrap:'circular',
		animation:1000,
		initCallback: image_row_4_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	$('#details_row_4').jcarousel({
        scroll:1,
		visible:3,
		wrap:'circular',
		animation:700,
		initCallback: image_row_4_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	$('#image_row_5').jcarousel({
        scroll:1,
		visible:3,
		wrap:'circular',
		animation:1000,
		initCallback: image_row_5_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	$('#details_row_5').jcarousel({
        scroll:1,
		visible:3,
		wrap:'circular',
		animation:700,
		initCallback: image_row_5_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	$('#services_row').jcarousel({
        scroll:1,
		visible:3,
		wrap:'circular',
		animation:1000,
		initCallback: services_row_initCallback,
		itemVisibleInCallback: {
            onAfterAnimation:  mycarousel_itemVisibleInCallbackAfterAnimation
        },
		setupCallback: myc_setup_comp,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	
	
});

function fadeInImages(){
	
	var active = current;
	//$(current).fadeOut();
	//$(next).fadeIn();
	
	var total = images.length;
	
	var currentid = $.inArray(active,images);
	//alert(currentid);
	
	if(currentid == -1){
		next = images[0]; 	
	}else if(currentid >= (total-1)){
		next = images[0];
	}else{
		next = images[currentid +1];	
	}
	current = next;	
	if(total > 1){
		val = $('.thumbnav div.'+next).attr('id').replace("54_","960_");
		
		$('.thumbnav .active img.color').hide();
		$('.thumbnav .active canvas').show();
		$('.thumbnav .active').removeClass('active');
		$('.thumbnav div.'+next).addClass('active');
		
		$('.pimg').each(function(){
				if($(this).is(':visible')){
					$(this).fadeOut();	
					//$(this).hide();	
				}
									 });
			
		$('#'+val).fadeIn();
		setActive();
	}
}


function mycarousel_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
    //display('Item #' + idx + ' is now visible');
	
	if(idx <=0){
		idxy = idx+1;
	}else{
		idxy = idx-1;
	}
	
	//idxy = idx -1;
	imageid = $('li.jcarousel-item-'+idxy+' div').attr('id');
	if(imageid !== undefined){
		images = imageid.split('|');
		
		val = $('.thumbnav div.'+images[0]).attr('id').replace("54_","960_");
		
		if(setupcomp === true){
		
		//HIDE ALL THUMBNAILS
		$('.pthumb').each(function(){
			if($(this).is(':visible')){
				//$(this).fadeOut();	
				$(this).hide();	
			}
								 });
		
		$.each(images,function(key,value){
				if($('.thumbnav .'+value).is(':hidden')){

				$('.thumbnav .'+value).show();	
			}			   
							   });
		
		//val.replace('54_','');
		$('.thumbnav .active img.color').hide();
		$('.thumbnav .active canvas').show();
		$('.thumbnav .active').removeClass('active');
		$('.thumbnav div.'+images[0]).addClass('active');
		$('.pimg').each(function(){
			if($(this).is(':visible')){
				$(this).fadeOut();	
				//$(this).hide();	
			}
								 });
		
		$('#'+val).fadeIn();
		setActive();
		
		current = images[0];
		}
	}
	/*
		val = $('.thumbnav div.'+imageid).attr('id').replace("54_","960_");
		
		//val.replace('54_','');
		$('.thumbnav .active img.color').hide();
		$('.thumbnav .active canvas').show();
		$('.thumbnav .active').removeClass('active');
		$('.thumbnav div.'+imageid).addClass('active');
		$('.pimg').each(function(){
			if($(this).is(':visible')){
				//$(this).fadeOut();	
				$(this).hide();	
			}
								 });
		
		$('#'+val).fadeIn();
		setActive();
		*/
	
	
};

function myc_setup_comp(carousel) {
	//alert(carousel.first);
	idx = carousel.first;
	idxy = idx+1;
	/*if(idx <=0){
		idxy = idx+1;
	}else{
		idxy = idx-1;
	}*/
	
	//alert(idxy);
	
	imageid = $('li.jcarousel-item-'+idxy+' div').attr('id');
	if(imageid !== undefined){
		images = imageid.split('|');
		
		val = $('.thumbnav div.'+images[0]).attr('id').replace("54_","960_");
		
		//val.replace('54_','');
		
		//HIDE ALL THUMBNAILS
		$('.pthumb').each(function(){
			if($(this).is(':visible')){
				//$(this).fadeOut();	
				$(this).hide();	
			}
								 });
		
		$.each(images,function(key,value){
				if($('.thumbnav .'+value).is(':hidden')){

				$('.thumbnav .'+value).show();	
				
					
			}			   
							   });
		
		
		$('.thumbnav .active img.color').hide();
		$('.thumbnav .active canvas').show();
		$('.thumbnav .active').removeClass('active');
		$('.thumbnav div.'+images[0]).addClass('active');
		$('.pimg').each(function(){
			if($(this).is(':visible')){
				$(this).fadeOut();	
				//$(this).hide();	
			}
								 });
		
		$('#'+val).fadeIn();
		setActive();
	
		current = images[0];
		
	}
	setupcomp = true;
	intervalId = setInterval('fadeInImages()',5000);
	
}




function more_initCallback(carousel) {

 
    jQuery('#more_right').bind('click', function() {
	    carousel.next();
        return false;
    });
 
    jQuery('#more_left').bind('click', function() {
        carousel.prev();
        return false;
    });
};

function set_r1(){
	r1 = true;	
}
function set_r2(){
	r2 = true;	
}
function set_r3(){
	r3 = true;	
}
function set_r4(){
	r4 = true;	
}
function set_r5(){
	r5 = true;	
}

function image_row_1_initCallback(carousel) {

 
    jQuery('#image_row_1_right').bind('click', function() {
			if(r1 == true){
				carousel.next();
				i1++;
				if(i1 == 2){
					r1 = false;
					i1 = 0;
					setTimeout("set_r1()", 1000);
				}
			}
			
			return false;
    });
 
    jQuery('#image_row_1_left').bind('click', function() {
        if(r1 == true){
				carousel.prev();
				i1++;
				if(i1 == 2){
					r1 = false;
					i1 = 0;
					setTimeout("set_r1()", 1000);
				}
			}
        return false;
    });
	
};

function image_row_2_initCallback(carousel) {

 
    jQuery('#image_row_2_right').bind('click', function() {
        if(r2 == true){
				carousel.next();
				i2++;
				if(i2 == 2){
					r2 = false;
					i2 = 0;
					setTimeout("set_r2()", 1000);
				}
			}
        return false;
    });
 
    jQuery('#image_row_2_left').bind('click', function() {
        if(r2 == true){
				carousel.prev();
				i2++;
				if(i2 == 2){
					r2 = false;
					i2 = 0;
					setTimeout("set_r2()", 1000);
				}
			}
        return false;
    });
};

function image_row_3_initCallback(carousel) {

 
    jQuery('#image_row_3_right').bind('click', function() {
        if(r3 == true){
				carousel.next();
				i3++;
				if(i3 == 2){
					r3 = false;
					i3 = 0;
					setTimeout("set_r3()", 1000);
				}
			}
        return false;
    });
 
    jQuery('#image_row_3_left').bind('click', function() {
          if(r3 == true){
				carousel.prev();
				i3++;
				if(i3 == 2){
					r3 = false;
					i3 = 0;
					setTimeout("set_r3()", 1000);
				}
			}
        return false;
    });
};

function image_row_4_initCallback(carousel) {

 
    jQuery('#image_row_4_right').bind('click', function() {
        if(r4 == true){
				carousel.next();
				i4++;
				if(i4 == 2){
					r4 = false;
					i4 = 0;
					setTimeout("set_r4()", 1000);
				}
			}
        return false;
    });
 
    jQuery('#image_row_4_left').bind('click', function() {
        if(r4 == true){
				carousel.prev();
				i4++;
				if(i4 == 2){
					r4 = false;
					i4 = 0;
					setTimeout("set_r4()", 1000);
				}
			}
        return false;
    });
};

function image_row_5_initCallback(carousel) {

 
    jQuery('#image_row_5_right').bind('click', function() {
        if(r5 == true){
				carousel.next();
				i5++;
				if(i5 == 2){
					r5 = false;
					i5 = 0;
					setTimeout("set_r5()", 1000);
				}
			}
        return false;
    });
 
    jQuery('#image_row_5_left').bind('click', function() {
        if(r5 == true){
				carousel.prev();
				i5++;
				if(i5 == 2){
					r5 = false;
					i5 = 0;
					setTimeout("set_r5()", 1000);
				}
			}
        return false;
    });
};

function services_row_initCallback(carousel) {

 
    jQuery('#services_row_right').bind('click', function() {
        carousel.next();
		clearInterval(intervalId);
		intervalId = setInterval('fadeInImages()',5000);
        return false;
    });
 
    jQuery('#services_row_left').bind('click', function() {
        carousel.prev();
		clearInterval(intervalId);
		intervalId = setInterval('fadeInImages()',5000);
        return false;
    });
};

 var paircount = 0;
 
      /* If you want to desaturate after page loaded - use onload event
       * of image.
      */
      function initImage(obj)
      {
        obj.onload = null;
        var $newthis = $(obj);
        if ($.browser.msie)
        {
          // You need this only if desaturate png with aplha channel
          $newthis = $newthis.desaturateImgFix();
        }
        // class for easy switch between color/gray version
        $newthis.addClass("pair_" + ++paircount);
        var $cloned = $newthis.clone().attr('id', '');
        // reset onload event on cloned object
        $cloned.get(0).onload = null;
        // add cloned after original image, we will switch between
        // original and cloned later
        $cloned.insertAfter($newthis).addClass("color").hide();
        // desaturate original
        $newthis = $newthis.desaturate();
        // add events for switch between color/gray versions
        $newthis.bind("mouseenter mouseleave click", desevent);
        $cloned.bind("mouseenter mouseleave click", desevent);
		setActive();
      };
 
      function desevent(event) 
      {
        var classString = new String($(this).attr('class'));
        var pair = classString.match(/pair_\d+/);
        // first I try was $("."+pair).toggle() but IE switching very strange...
        $("."+pair).hide();
        if (event.type == 'mouseenter')
          $("."+pair).filter(".color").show();
        if (event.type == 'mouseleave')
          $("."+pair).filter(":not(.color)").show();
		  setActive();
      }

	function setActive(){
		$('.thumb_nav .active img.color').show();
		$('.thumb_nav .active canvas').hide();
		$('.thumbnav .active img.color').show();
		$('.thumbnav .active canvas').hide();
	}