$(function () {
    PropSizes = {};
    checkedSize = '';
    checkedColor = '';
    originPriceCode = $('#basePrice')['html']();
    $('#propData')['find']('.propRow')['each'](function () {
        propColorName = $(this)['find']('.propColor')['text']();
        propSizeName = $(this)['find']('.propSize')['text']();
        propColorPicture = $(this)['find']('.propColorPicture img')['attr']('src');
        propSizePicture = $(this)['find']('.propSizePicture img')['attr']('src');
        propPrice = $(this)['find']('.propPrice')['html']();
        if (!PropSizes[propSizeName]) {
            PropSizes[propSizeName] = {};
        };
        PropSizes[propSizeName]['image_url'] = propSizePicture;
        if (!PropSizes[propSizeName]['colors']) {
            PropSizes[propSizeName]['colors'] = {};
        };
        PropSizes[propSizeName]['colors'][propColorName] = {};
        PropSizes[propSizeName]['colors'][propColorName]['image_url'] = propColorPicture;
        PropSizes[propSizeName]['colors'][propColorName]['buy_code'] = propPrice;
    });
    for (el in PropSizes) {
        $('#cstPropData .cstPropSizes')['append'](function () {
            return '<a href="javascript:;" rel="' + el + '"><img src="' + PropSizes[el]['image_url'] + '" alt=""></a>';
        });
    };
    
    $(".cstPropColors").css('overflow','visible'); 

   
    $('#cstPropData .cstPropSizes a')['click'](function () {
        $("#selectcolor").css("display", "block");        
        $(this)['siblings']()['removeClass']('checked');
        $(this)['addClass']('checked');
        $('#cstPropData .cstPropColors')['html']('');
        $('#basePrice')['html'](originPriceCode);
        checkedSize = $(this)['attr']('rel');
        
        for (el in PropSizes[checkedSize]['colors']) {
            $('#cstPropData .cstPropColors')['append'](function () {
                
                var FilePath = '';
                var part = /%2F/g; 
                var FilePath = (propColorPicture.replace(new RegExp(part), '/')).match('generated(.*)_80x80.jpg&src');
                 
                var nameImage = PropSizes[checkedSize]['colors'][el]['image_url']; 

                return '<a rel="' + el + '" href="/_mod_files/ce_images/eshop/generated'+ FilePath[1] + '_80x80_pc.jpg" rel="'+el+'" onclick="return false"><img width="30px" src="/_mod_files/ce_images/eshop/generated'+ FilePath[1] + '_80x80_pc.jpg" title="'+el+'" onmouseover="'+ show(this, el)+'" onmouseout="'+closeBox(el)+ '"/></a>';

});
            
        
        };
        $('#cstPropData .cstPropColors a')['click'](function () {
            $(this)['siblings']()['removeClass']('checked');
            $(this)['addClass']('checked');
            checkedColor = $(this)['attr']('rel');
            $('#basePrice')['html'](function () {
                return PropSizes[checkedSize]['colors'][checkedColor]['buy_code'];
            });
        });
    });
      
   function closeBox(id){
        var box = document.getElementById(id);
        
        //box = box[0];

        var body = document.getElementsByTagName('body');
        
        //alert(box);    
        body[0].removeChild(box);        
        
    }

	function show(img, name){
	   var x = findPosX(img);
	   var y = findPosY(img);
       
       var box = document.createElement('div');
           box.name = name;
           box.id = name;
           box.style.width = '100px';
           box.style.height = '100px';
           box.style.position = 'absolute';
           box.style.backgroundImage = 'url(\''+ img.src +'\')';
           box.style.left = event.clientX  + 'px';
           box.style.top = event.clientY - 100 + 'px';           
       
       var titlebox = document.createElement('div');
           titlebox.style.backgroundColor = '#DFDFDF';
           titlebox.style.fontFamily = 'arial';
           titlebox.style.fontSize = '11px';
           titlebox.style.textAlign = 'center';
           titlebox.innerHTML = name;
           box.appendChild(titlebox);
           
           
       var body = document.getElementsByTagName('body');    
       return body[0].appendChild(box);
    }
    
    
    
function findPosX(obj) {
    var curleft = 0;
    if (obj.offsetParent) {
        while (1) {
            curleft+=obj.offsetLeft;
            if (!obj.offsetParent) {
                break;
            }
            obj=obj.offsetParent;
        }
    } else if (obj.x) {
        curleft+=obj.x;
    }
    return curleft;
}
 
function findPosY(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        while (1) {
            curtop+=obj.offsetTop;
            if (!obj.offsetParent) {
                break;
            }
            obj=obj.offsetParent;
        }
    } else if (obj.y) {
        curtop+=obj.y;
    }
    return curtop;
}    

});

return  '<a rel="' + el + '" href="/_mod_files/ce_images/eshop/generated'+ FilePath[1] + '_80x80_pc.jpg" rel="'+el+'" onclick="return false"><img width="30px" src="'+PropSizes[checkedSize]['colors'][el]['image_url']+'" onmouseover="show(this, \''+ el +'\')" onmouseout="closeBox(\''+ el +'\')"/></a>';