(function($){

    $.com = $.com || {};
    $.com.ruukkihome = $.com.ruukkihome || {};

    $.com.ruukkihome.products = {};
    
    $.com.ruukkihome.products.imageswapper = {
        config: {
            main_class: 'main_img',
            main_prefix: 'main',
            thumb_class: 'thumb_img',
            thumb_prefix: 'thumb'
        },
        images: null
    };
    $.extend($.com.ruukkihome.products.imageswapper, {
        init: function(thumbnail_holder) {            
            var _self = this;
            
            if ($.com.ruukkihome.products.imageswapper.images === null) {
                $.com.ruukkihome.products.imageswapper.images = {};
            }
            
            this.thumb_holder = thumbnail_holder;
            this.thumbnails = $('img.' + $.com.ruukkihome.products.imageswapper.config.thumb_class, this.thumb_holder);
            
            $.each(this.thumbnails, function(i, thumb){
                var thumb = $(thumb);
                
                var guid = $.trim(thumb.attr('id').toString().split('_')[1].toString());                
                var main_img = $('#' + $.com.ruukkihome.products.imageswapper.config.main_prefix + '_' + guid);
                
                if (   typeof main_img == 'undefined'
                    || typeof main_img[0] == 'undefined')
                {
                    return;
                }
                
                var is_visible = Boolean(thumb.hasClass('visible'));
                
                $.com.ruukkihome.products.imageswapper.images[guid] = {
                    main: main_img,
                    thumb: thumb,
                    visible: is_visible
                };
                
                _self._prepare_thumbnail(thumb);
            });
        },
        _prepare_thumbnail: function(thumb) {
            var thumb_guid = thumb.attr('id').toString().split('_')[1];
            
            thumb.bind('mouseover', function(){
                $.each($.com.ruukkihome.products.imageswapper.images, function(guid, data){
                    if (thumb_guid == guid) {
                        if (! data.visible) {
                            data.main.show();
                            data.thumb.addClass('visible');
                            $.com.ruukkihome.products.imageswapper.images[guid].visible = true;
                        }
                    } else {
                        if (data.visible) {
                            data.main.hide().removeClass('visible');
                            data.thumb.removeClass('visible');
                            $.com.ruukkihome.products.imageswapper.images[guid].visible = false;
                        }
                    }
                });
            });
        }
    });
    
    $(document).ready(function(){
        var thumb_holder = $('.thumbnail_holder');
        if (typeof thumb_holder[0] != 'undefined') {
            $.com.ruukkihome.products.imageswapper.init(thumb_holder);
        }
        
        // alternatively we could use background: rgb('+hex[1]+', '+hex[2]+', '+hex[3]+')
        var color_regexp = new RegExp(/background: rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/);
        // $style = $(this).children('.color_box').attr('style');
        // hex = color_regexp.exec($style);
        
        // $('#product_colors a').hover(
        //     function() {
        //         var bg = $('div', this).css('background');
        //         if ($.browser.mozilla == true)
        //         {
        //             bg = bg.match(/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/);
        //         }
        //         else
        //         {
        //             bg = bg.match(/#[\w]{6}/);
        //         }
        //         $style = $(this).children('.color_box').attr('style');
        //         hex = color_regexp.exec($style);
        //         $('div', this).css('background', bg[0] + ' url(/style/img/overlay-colors-selected.gif) no-repeat top left');
        //         $(this).children('.color_box').css('background', 'rgb('+hex[1]+', '+hex[2]+', '+hex[3]+') url(/style/img/overlay-colors-selected.gif) no-repeat top left');
        //         $("#product_colors_name").text($(this).attr('title'));
        //     },
        //     function() {
        //         if ($.browser.mozilla == true)
        //         {
        //             bg = bg.match(/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/);
        //         }
        //         else
        //         {
        //             bg = bg.match(/#[\w]{6}/);
        //         }
        // 
        //         $('div', this).css('background', bg[0] + ' url(/style/img/overlay-colors.gif) no-repeat top left');
        //         
        //         $(this).children('.color_box').css('background', 'rgb('+hex[1]+', '+hex[2]+', '+hex[3]+') url(/style/img/overlay-colors.gif) no-repeat top left');
        //         $("#product_colors_name").text('');
        //     });
        $('div.product_colors a').hover(
            function() {
				var bg	= $('div', this).css('background');

				if ($.browser.mozilla == true || $.browser.safari == true)
				{
					bg	= bg.match (/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/);
				}
				else
				{
					bg	= bg.match (/#(\S{6})/);
				}

				$('div', this).css('background', bg[0] + ' url(/style/img/overlay-colors-selected.gif) no-repeat top left');
                $(this).siblings('.product_colors_name').text($(this).attr('title'));
            },
            function() {
				var bg	= $('div', this).css('background');
				if ($.browser.mozilla == true || $.browser.safari == true)
				{
					bg	= bg.match (/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/);
				}
				else
				{
					bg	= bg.match (/#(\S{6})/);					
				}

				
                $('div', this).css('background', bg[0] + ' url(/style/img/overlay-colors.gif) no-repeat top left');
//                $("#product_colors_name").text('');
            });
    });
    
})(jQuery);

function showColorTxt(textToShow)
{
    jQuery("#product_colors_name").html(textToShow);
}