$(document).ready( function() {
	
	$('.color_fill').click ( function() {
		
		   $('.product_color').removeClass( 'product_selected' );
		   $(this).parents('.product_color').addClass( 'product_selected' );
		   var selected_color = ( $(this).attr('rel') );
		   $('#cart').attr( 'href', "https://secure.voltaicsystems.com/cgi-bin/UCEditor?merchantId=VOLTA&ADD=" + selected_color  );
		
	});
	if ( $('.point-random_images').length < 1 ) {	
	$('.color_fill').hover ( function() {
		$(this).parents('.product_color').addClass('product_hover');
		$('.random_images img').hide();
		var image = $(this).attr('rel');
		$('#img-' + image ).show();
	}, function() {
		$(this).parents('.product_color').removeClass('product_hover');
		
		var image1 = $('.product_selected .color_fill').attr('rel');
			//alert(image1 );
		$('.random_images img').hide();
		$('#img-' + image1).show();
	});
	}
	else{
		$('.color_fill').hover ( function() {
                $(this).parents('.product_color').addClass('product_hover');
                $('.random_images img').hide();
                var image2 = $(this).attr('rel');
	        $('.random_images img[rel=img-' + image2 + ']').show();

	}, function() {
                $(this).parents('.product_color').removeClass('product_hover');

                var image1 = $('.product_selected .color_fill').attr('rel');
                        //alert(image1 );
                $('.random_images img').hide();
       	 	$('.random_images img[rel=img-' + image1 + ']').show();

	});

	}

	var image= $('.product_selected .color_fill').attr('rel');
	$(".random_images img").hide();
	
	if ( $('.point-random_images').length < 1 ) {
		$('#img-' + image).show();	
		$('#img1').show();
	}
	else {
		$('.random_images img[rel=img-' + image + ']').show();
	}
       $("#small1").hover(function(){
	        $(".random_images img").hide();
		$("#img1").show();
 		$('#img-' + image).show();
        }, function(){
		$(".random_images img").hide();
	        $('#img-' + image).show();
        	$("#img1").show();
	
		
	});
	
	$("#small2").hover(function(){
       		$(".random_images img").hide();
		$("#img2").show();

	}, function(){
                $(".random_images img").hide();
                $('#img-' + image).show();
                $("#img1").show();
	
       });

	$("#small3").hover(function(){
                $(".random_images img").hide();
                $("#img3").show();

        }, function(){
                $(".random_images img").hide();
                $('#img-' + image).show();
                $("#img1").show();
	
	});
	
	$("#small4").hover(function(){
                $(".random_images img").hide();
		 $("#img4").show();

        }, function(){
                $(".random_images img").hide();
                $('#img-' + image).show();
                $("#img1").show();

	});

	$("#small5").hover(function(){
                $(".random_images img").hide();
		 $("#img5").show();

        }, function(){
                $(".random_images img").hide();
                $('#img-' + image).show();
                $("#img1").show();

	});

	$("#small6").hover(function(){
                 $(".random_images img").hide();
		$("#img6").show();

        }, function(){
                $(".random_images img").hide();
                $('#img-' + image).show();
                $("#img1").show();

	});

	/*************POP UP WINDOW **************/
	
	$(function () {
        $('.content-info').each(function () {
            var distance = 10;
            var time = 250;
            var hideDelay = 500;

            var hideDelayTimer = null;

            var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('.popup', this);


            $([trigger.get(0), info.get(0)]).mouseover(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again
                    return;
                } else {
                    // reset position of info box
                    beingShown = true;

                    if ($.browser.msie) {
                        info.css({
                            top: 40,
                            left: -8,
                            display: 'inline-block'
                        });
                        beingShown = false;
                        shown = true;
                    } else {
                        info.css({
                            top: 40,
                            left: -8,
                            display: 'block'
                        }).animate({
                            top: '=' + distance + 'px',
                            opacity: 1
                        }, time, 'swing', function() {
                            beingShown = false;
                            shown = true;
                            
                        });
                        
                    }

                    
                }

                return false;
            }).mouseout(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                    if ($.browser.msie) {
                        info.css({
                            display: 'none'
                        });
                        shown = false;
                    } else {
                        info.animate({
                            top: '=' + distance + 'px',
                            opacity: 0
                        }, time, 'swing', function () {
                            shown = false;
                            info.css('display', 'none');
                        });                        
                    }

                }, hideDelay);

                return false;
            });
        });
    });
    
				 
});