/**
 * Javascript Extension File for Plugin
 * cerabella_products
 * ------
 * cerabella_products_pi1
 */

$.Class("cerabella_products",{
    
    },
    {
    init: function()
    {
        this.root = false;
        this.items = [];
        
        if ($('#tx_cerabella_products-series').length) {
            this.initializeSingleView($('#tx_cerabella_products-series'));
        }
        
        if ($('#tx_cerabella_products-form').length) {
            this.initializeSearchForm($('#tx_cerabella_products'), $('#tx_cerabella_products-form'));
        }
        
        if ($('#tx_cerabella_products_quicksearch').length) {
            this.initializeQuickSearchForm($('#tx_cerabella_products_quicksearch'));
        }
    },
    
    
    /**
     * SINGLE VIEW
     * --------------------
     */
    initializeSingleView: function(root_container)
    {
        this.root = root_container;
        this.singleGetItems();
        this.current = 0;
        
        //ersten aktivieren
        this.singleShowItem(this.current);

        this.singleAddEventListener();
    },
    
    
    singleGetItems: function()
    {
        items = $('.tx_cerabella_products-articles .thumbs li', this.root);
        this.select = $('.tx_cerabella_products-articles .thumbs ul', this.root)[0];
        this.selectPosition = 1;
        
        for (x =0; x < items.length; x++) {
            itemnumber = items[x].id.replace(/thumb_/, "");

            this.items[x] = {
                navElement: $('.image', $(items[x]))[0],
                navNext: $('.next', $("#details_"+itemnumber))[0],
                navPrev: $('.prev', $("#details_"+itemnumber))[0],
                showElement: $('.article_details', $("#details_"+itemnumber))[0]
            }
            
            //Position image
            image = $('.image_detail img', this.items[x].showElement)[0];
            if (image && image != "undefined") {
                $(image).hide();
                
                image_small = $('img', this.items[x].navElement)[0];

                this.positionImage(image_small);
            }
        }
    },
    
    positionImage: function(image)
    {
        if ( !image || image == "undefined" ) {
            return;
        }
       
        if (image.complete || image.readyState != 'complete') {
             $(image).css( {'top' : '50%', 'position': 'absolute', 'margin-top': $(image).height() / 2 *-1 +'px'} );
             return true;
        }
        
        window.setTimeout( $.proxy(this.positionImage, this, image),1000);
       

    },
    
    singleHideItems: function() 
    {
        for (x =0; x < this.items.length; x++) {
            $(this.items[x].showElement).hide();
            this.items[x].navElement.className = 'image';
            $(this.items[x].navNext).css({ opacity: 0, filter: 'alpha(opacity=0)' });
            $(this.items[x].navPrev).css({ opacity: 0, filter: 'alpha(opacity=0)' });
        }
    },
    
    singleAddEventListener: function()
    {
        for (x =0; x < this.items.length; x++) {
            $(this.items[x].navElement).bind("click", $.proxy(this.singleShowItem, this, x) );
            //Event.observe( this.items[x].navNext, "mouseover", this.SingleHighlight(this, x, this.items[x].navNext) );
        }
    },
    
    /* SingleHighlight: function(position, el)
    {
        if (position < this.items.length -1) {
            new Effect.Opacity(el,{ from: 0.3, to: 0.8, duration: 0.5 });
        }
    }, */
    
    singleShowItem: function(position)
    {
        this.singleHideItems();

        //this.items[position].showElement.show();

        $(this.items[position].showElement).fadeIn(500);
        
        if (position < this.items.length -1) {
            $(this.items[position].navNext).fadeTo(1000, 0.3);
            
            $(this.items[position].navNext).bind("mouseover", $.proxy(function(){
                $(this.items[position].navNext).fadeTo(500, 0.8);
            },this));
            
            $(this.items[position].navNext).bind( "mouseout", $.proxy(function(){
                $(this.items[position].navNext).fadeTo(500, 0.3)
            },this));
        }
        
        if (position > 0 ) {
           $(this.items[position].navPrev).fadeTo(1, 0.3);
            
            $(this.items[position].navPrev).bind("mouseover", $.proxy(function(){
                $(this.items[position].navPrev).fadeTo(500, 0.8);
            }, this ));
            
            $(this.items[position].navPrev).bind("mouseout", $.proxy(function(){
                $(this.items[position].navPrev).fadeTo(500, 0.3);
            },this));
        }
        
        $(this.items[position].showElement).fadeIn(500);

        //this.items[position].navElement.move( { x: 0, y: 8 } );
        this.items[position].navElement.className = 'image sel';
        
        image = $('.image_detail img', this.items[position].showElement)[0];
        if (image && image != "undefined") {        
            $(image).show();
        }
        
        this.current = position;
    },
    
    next: function() 
    {
        if (this.items.length > this.current+1) {
            this.singleShowItem(this.current+1);
            
            if (this.current >= this.selectPosition + 4) {
                this.scrollRight();
            }
        }
    },
    
    prev: function() 
    {
        if (this.current > 0) {
            this.singleShowItem(this.current-1);
            
            if (this.current < this.selectPosition ) {
                this.scrollLeft();
            }
        }
    },
    
    scrollRight: function()
    {   
        if ( this.selectPosition > this.items.length/2 ) {
            return;
        }
        
        this.selectPosition = this.selectPosition+1;
        
        $(this.select).animate({
            left: "-=160"
        }, 500);
    },
    
    scrollLeft: function()
    {
        
        if ( this.selectPosition < 2 ) {
            return;
        }
        
        this.selectPosition = this.selectPosition-1;
        
        $(this.select).animate({
            left: "+=160"
        }, 500);
    },
    
    
    /**
     * SEARCH FORM VIEW
     * --------------------
     */
    initializeSearchForm: function(root_container, search_container)
    {
        this.root = root_container;
        this.search = search_container;
        
        /* if (this.root.select('.search_result_header').length > 0) {
            this.searchHideSearch();
        } */
        
        this.searchCreateAjaxCount();
        this.searchCreateColorPreview();
    },
    
    searchHideSearch: function()
    {
        this.search.blindUp( { duration: 0.8 } );
    },
    
    searchToggle: function(a)
    {
        if (this.search.getStyle('display') == "none") {
            this.search.blindDown( { duration: 0.8 } );
        } else {
            this.search.blindUp( { duration: 0.8 } );
        }
        a.blur();
    },
    
    searchCreateAjaxCount: function()
    {
        $('#color').bind('change', $.proxy(this.searchCountUpdate, this));
        $('#format').bind('change',  $.proxy(this.searchCountUpdate, this));
        $('#texture').bind('change',  $.proxy(this.searchCountUpdate, this));
    },
    
    searchCountUpdate: function()
    {
        var cat = $('#actcat').value;
        var color = $('#color option:selected')[0].value;
        var texture = $('#texture option:selected')[0].value;
        var format = $('#format option:selected')[0].value;

        $.ajax('index.php', {
            type: 'get',
            data: 'eID=cerabella_products&cat='+cat+'&color='+color+'&texture='+texture+'&format='+format,
            complete: this.searchSetCount,
            beforeSend: this.searchShowLoader
        });
    },
    
    searchSetCount: function(data)
    {
        c = data.responseXML.getElementsByTagName('count')[0];

        if (c) {
            $('#filter_results').html( 'Ergebnisse: <strong>'+c.firstChild.nodeValue+'</strong>' );
            $('#filter_results').className = 'ready';
        }
        
    },
    
    searchShowLoader: function()
    {
        $('#filter_results').className = 'loading';
        $('#filter_results').html('');
    },
    
    searchCreateColorPreview: function()
    {
        var previewLinks = $('.color_preview a', this.root);   

        for (x = 0; x < previewLinks.length; x++) {
            
            image = $('.image_zoom .image img', $(previewLinks[x].parentNode.parentNode))[0];
            image2 = $('.image_ori img', $(previewLinks[x].parentNode.parentNode))[0];
            $(previewLinks[x]).bind("click", $.proxy(function(image, image2, a, evt){
                image.src = "clear.gif";
                image2.src = "clear.gif";
                image.src = a.href;
                image2.src = a.rel;
                evt.preventDefault();
            }, this, image, image2, previewLinks[x]) );
        }
    },
    
    
    /**
     * QUICKSEARCHVIEW
     * ---------------
     */
    initializeQuickSearchForm: function(root_container)
    {
        this.root = $(root_container);
        this.root.hide();
        
        this.tabs = [];
        this.getTabs();
        
        this.showTab(0);
    },
    
    getTabs: function()
    {
        tabs = $('.tab', this.root);

        for ( x=0; x < tabs.length; x++ ) {

            navEl = $('#'+tabs[x].id.replace(/tab/, 'cat'), this.root)[0];

            this.tabs[x] = {
                tab : tabs[x],
                nav : navEl,
                link: $('a', navEl)[0].href
            };
            
            $('a', navEl)[0].href = 'javascript: cerabellaProducts.showTab('+x+')';
            
            forms = $('form', tabs[x]);
            for (z=0; z<forms.length; z++) {
                forms[z].action = this.tabs[x].link
            }

            $(this.tabs[x].tab).css ('position', 'static');

            
            $(this.tabs[x].tab).hide();
        }
        
        $(this.root).fadeIn();
    },
    
    showTab: function(position)
    {   
        for (x = 0; x < this.tabs.length; x++) {
            $(this.tabs[x].tab).hide();
            this.tabs[x].nav.className = "normal";
        }
          
        $(this.tabs[position].tab).fadeIn(500);
        $(this.tabs[position].nav).className = "selected";
        $('a', $(this.tabs[position].nav))[0].blur();
        $('#actcat').value = $('input.actcat', this.tabs[position].tab)[0].value;
    }

});

$(document).ready( function() {
    cerabellaProducts = new cerabella_products();
});