var VM = {
    
    // Guardamos aqui el color seleccionado actualmente
    'currentSelection': null,
    
    'images': null,
    
    'divSelectionText': null,

    'init': function(){
    
        if($E('.luckyZoomBigImageCont div img')){
            $E('.luckyZoomBigImageCont div img').setStyle('width','');
        }
        
        
        //this.images = $ES('.Silk_color_img');
        this.images = $$('.ps_product_custom_type_radio .radio_box img');
        // Este div contiene los radioButtons que se van a ocultar
        //var containerDiv = $('addtocart').getChildren()[2];$E('div .ps_product_custom_type_radio')
        var containerDiv = $E('div .ps_product_custom_type_radio');
        // Ocultamos los radioButtons
        $$('div .ps_product_custom_type_radio .inputbox').each(function(el){
            el.style.display = 'none';   
        });
        
        // Agregamos un div para colocar el texto del color seleccionado
        this.divSelectionText = new Element('div');
        this.divSelectionText.setStyle('height',28);
        this.divSelectionText.setStyle('margin-top', 29);
        
        if($E('#hk47xx_table .ps_product_custom_type_radio')){
            this.divSelectionText.injectInside($E('#hk47xx_table .ps_product_custom_type_radio'));
        }
        
        
        // Eliminamos el texto para que solo queden las imagenes
        this.clearText(containerDiv);
        
        // Agregamos un onclick handler a cada imagen para simular los clicks
        // a los radioButtons
        if(this.images.length > 0){
            this.setImagesClickHandler(); 
            
            this.images[0].getPrevious().checked = true;
            this.images[0].width = 24;
            this.images[0].height = 24;  
            this.images[0].setStyle('border','solid 2px red');
            
            this.currentSelection = this.images[0];
            this.divSelectionText.innerHTML = '<p>Current Selection: ' + this.images[0].alt + '.</p>';
        }
        
        
        
    },
    
    'clearText': function(containerDiv){
        var deleteText = function(element){
            if(element && element.nodeType === 3){
                element.parentNode.removeChild(element);
            }    
        }
        $ES('.radio_box',containerDiv).each(function(el){
            $each(el.childNodes,deleteText);
        });
    },
    
    'setImagesClickHandler': function(){
        this.images.each(function(el){
            el.addEvent('click', function(e){
                var src = e.target || e.srcElement;
                console.log(src.getPrevious());
                src.getPrevious().checked = true;
                this.currentSelection.setStyle('border','');
                this.currentSelection.width = 28;
                this.currentSelection.height = 28;
                src.width = 24;
                src.height = 24;               
                src.setStyle('border','solid 2px red');
                //this.divSelectionText.innerHTML = '<p>Current Selection: Brown.</p>';
                //console.log(src.alt);
                this.divSelectionText.innerHTML = "<p>Current Selection: " + src.alt + ".</p>";
                
                this.currentSelection = src;   
            }.bind(this));
        }.bind(this));
    }
}

window.addEvent('domready',function(){
    if($('addtocart')) {
        VM.init();   
    }
    if($E('.moduletable') && $E('.moduletable_store')/* && $('hk47xx_table')*/){
        var myDiv = new Element('div');
        myDiv.setProperty('id','mainNavigationContainer');
        myDiv.injectAfter($E('.moduletable')).adopt($E('.moduletable_store'));
        $ES('.moduletable_toplinks a').each(function(link){
            $E('.moduletable_store').adopt(link); 
        });
        $E('.moduletable_toplinks').remove();
        var regexResult = /category_id=(\d+)/.exec(window.location.href);
        if(regexResult && regexResult[1]){
            myDiv.addClass('hk47xx_active_menu'+regexResult[1]);
        }
    }
    
});

/*
 * Aqui manejamos el popup que se muestra al hacer mouseover sobre el cuadro que 
 * muestra los colores de los Silk Bracelet 
 */ 
 
var BRACELET_POPUP = {
    'bigImages': [],
    'init': function(){
    
        var wrapper = new Element('div');
        
        this.popUpContainer = new Element('div');
        //wrapper.setStyle('border','solid #C6C2AB 4px;');
        this.popUpContainer.setStyle('height','171px');
        this.popUpContainer.setStyle('z-index',2000);
        this.popUpContainer.setStyle('position','absolute');
        wrapper.setStyle('border','solid #C6C2AB 4px');
        this.popUpContainer.setStyle('display','none');
        if(window.ie) {
            this.popUpContainer.setStyle('background','transparent url("../images/arrow.gif") no-repeat scroll');
        }
        else {
            this.popUpContainer.setStyle('background','transparent url("../images/arrow.png") no-repeat scroll');
        }
        this.popUpContainer.setStyle('background-position','bottom center');
        wrapper.setHTML('<img />');
        wrapper.injectInside(this.popUpContainer);
        this.popUpContainer.injectInside($E('body'));
        
        var smallImages = $$('.ps_product_custom_type_radio .radio_box img');
        smallImages.each(function(image){
            // Hacemos un preload de las imagenes
            var myImg = new Element('img');
            myImg.src = image.src.replace('_thb.gif','_mid.jpg');
            this.bigImages[this.bigImages.length] = myImg;
            
            // Agregamos los eventos del mouse
            
            image.addEvent('mouseenter',function(event){
                var target = event.target ? event.target : event.srcElement;
                var targetPosition = target.getCoordinates();
                var src = target.src;
                var imagePopUp = this.popUpContainer.getChildren()[0].getChildren()[0];
                imagePopUp.src = src.replace('_thb.gif','_mid.jpg');
                var x = targetPosition.left + (targetPosition.width/2) - (imagePopUp.width/2);
                var y = targetPosition.top - imagePopUp.height - 20;
                this.popUpContainer.setStyle('top',y);
                this.popUpContainer.setStyle('left',x);
                this.popUpContainer.setStyle('display','');
            }.bind(this));
            
            image.addEvent('mouseout',function(event){
                this.popUpContainer.setStyle('display','none');
            }.bind(this));
        },this);
    }
}

window.addEvent('domready',function(){
    if($$('.ps_product_custom_type_radio .radio_box img')) {
        BRACELET_POPUP.init();   
    }
    /*
     * Acciones Varias
     */
     
    if($('hk47xx_moduletable_store_table') && !$('hk47xx_moduletable_store_table').hasChild()){
       $('hk47xx_moduletable_store_table').remove(); 
    }
    
    if($E('.mm_left br')){
        $E('.mm_left br').remove();
    }
});

/*
 * Aqui manejamos el popUp en la pagina de productos, donde se muestran todos los productos
 * no la pagina de detalles... 
 */ 
window.addEvent('domready',function(){
    if($ES('.hk47xx_product').length > 0){
    
        VM.browsePopUp = new Element('div').setHTML('<div id="browsePagePopUp"><div></div></div>');
        VM.browsePopUp = VM.browsePopUp.getChildren()[0];
        VM.browsePopUp.setStyle('display','none');
        $ES('.hk47xx_product').each(function(product){
            product.addEvent('mouseover',function(event){
                //console.log(event);
                //console.log(this);
                event = new Event(event);
                this.name = $E('.hk47xx_product_name',this/*.getParent().getParent()*/).innerHTML;
                this.price = $E('.hk47xx_product_price',this/*.getParent().getParent()*/).innerHTML;
                this.description = $E('.hk47xx_product_description',this/*.getParent().getParent()*/).innerHTML;
                //VM.browsePopUp.getChildren()[0].innerHTML = '<p class="hk47xxProductName">'+this.name+'</p>'+this.price+'<p class="hk47xxProductDescription">'+this.description+'</p><p class="hk47xxClickForDetails">Click the image below for details...</p>';
                VM.browsePopUp.getChildren()[0].innerHTML = '<p class="hk47xxProductName">'+this.name+'</p>'+'<p class="hk47xxClickForDetails">'+this.price+'<br />Click the image for details...</p>';
                //var target = $(event.target ? event.target : event.srcElement);
                var targetPosition = this.getCoordinates();
                VM.browsePopUp.setStyle('display','');
                var x = targetPosition.left + (targetPosition.width/2) - (VM.browsePopUp.getCoordinates().width / 2);
                var y = targetPosition.top - (VM.browsePopUp.getCoordinates().height);
                // - VM.browsePopUp.getCoordinates().height - 20;
                VM.browsePopUp.setStyle('top',y);
                VM.browsePopUp.setStyle('left',x);
                
            });
            
            product.addEvent('mouseout',function(event){
                VM.browsePopUp.setStyle('display','none');
            });
            
        });
        
        VM.browsePopUp.injectInside($E('body'));
    }
});