var firstTime = true; //used in toggleLayers() function

Event.observe(document, 'dom:loaded', function() {
    switchProductViews();
    toggleLayers();
});


document.oncontextmenu = function() {return false;}



function switchProductViews() {
    //var productPreview = $('product-preview');
    var productDetailed = $('product-detailed-view'); 
    var buttonsContainer = $('product-buttons');
    var productButtons = $('product-buttons');
    
    //if(productPreview) {
        //productPreview.down('a').observe('click', showDetailed );         
        //buttonsContainer.down('.more-info-link a').observe('click', showDetailed );
        showDetailed();
        if(location.href.indexOf('#product-detailed-view') != -1) showDetailed();
    //}   
    
    
    function showDetailed(event) {
        //$('messages_product_view').hide();
        //productPreview.hide();
        productButtons.show();
        productDetailed.removeClassName('hide-screen');
        buttonsContainer.addClassName('buttons-detailed');
        jQuery('#main-image').jqzoom({
            zoomWidth: 493,
            zoomHeight: 575,
            xOffset: 0,
            yOffset: 0,
            title : false,
            activateOnClick: true      
        });
    }
}


function toggleLayers() {
    var openers = $$('a.layer-opener');
    if(openers) {

        

        openers.invoke('observe', 'click', function(event) {

            $$('.hide-screen').each(function(elem){
                elem.removeClassName('hide-screen').hide();
            })
            
            var destinationDiv = this.readAttribute('href');
            var destinationDivName = destinationDiv.substr(destinationDiv.indexOf('#') + 1)
            destinationDiv = $(destinationDiv.substr(destinationDiv.indexOf('#') + 1));
            
            if(destinationDiv) {
                $('rollover-span').hide();
                
                if(destinationDiv.visible()) {
                    $('rollover-span').show();
                    Effect.Fade(destinationDiv, { duration: 0.3 }); 
                    var rightLayer = $$('.tr-layer');
                    if(rightLayer && rightLayer[0].visible()) 
                        Effect.Fade(rightLayer[0], { duration: 0.3, afterFinish: function() {if($('product-buttons')) $('product-buttons').removeClassName('hide-ie');} }); 
                }
                else {
                    $$('.tl-layer').invoke('hide');
                    if(destinationDivName == 'more-photos') {
                        $('rollover-span').show();
                    }
                    Effect.Appear(destinationDiv, { 
                        duration: 0.3, 
                        afterFinish: function(eff) {
                            if(eff.element.id == 'more-photos' && firstTime ) {
                                jQuery('#more-photos .image-zoom').each(function() {
                                    var zoomOffsetX = (2 - parseInt(jQuery(this).closest('li').attr('data-col'))) * 165 + 1;
                                    var zoomOffsetY = parseInt(jQuery(this).closest('li').attr('data-row')) * (-185) -1;
                                    jQuery(this).jqzoom({
                                        zoomWidth: 493,
                                        zoomHeight: 575,
                                        xOffset: zoomOffsetX,
                                        yOffset: zoomOffsetY,
                                        title : false,
                                        activateOnClick: true   
                                    });   
                                });
                                firstTime = false; 
                            }
                        }
                    });
                }
            }
            event.preventDefault();  
        });    
    }  
    
    $$('.tl-layer .btn-close').invoke('observe', 'click',function() {
            var destinationDiv = this.up('.tl-layer');
            Effect.Fade(destinationDiv, { duration: 0.3 });
            $('rollover-span').show();
            var rightLayer = $$('.tr-layer');
            if(rightLayer && rightLayer[0].visible())
                Effect.Fade(rightLayer[0], { duration: 0.3, afterFinish: function() {if($('product-buttons')) $('product-buttons').removeClassName('hide-ie');} });
        });
        

    var simpleOpeners = $$('a.simple-opener');
    if(simpleOpeners) {
        simpleOpeners.invoke('observe', 'click', function(event) {
            var destinationDiv = this.readAttribute('href');
            destinationDiv = $(destinationDiv.substr(destinationDiv.indexOf('#') + 1));
            if(destinationDiv)
                Effect.toggle(destinationDiv, 'appear', { duration: 0.3, afterFinish: function() {if($('product-buttons')) $('product-buttons').toggleClassName('hide-ie');} });            
            event.preventDefault();  
        });    
    }
}