/*
    Pantene Global site JavaScript class
    Resource Interactive 2010
*/



PanteneGlobalHomePage = new Class({
    Implements: [Options],
    options: {
},

initialize: function(options) {
    this.setOptions(options);
    this.activePanel = 0;
    // take all external links and attach target and title
    $$('a[rel="external"]').each(function(el) {
        el.setProperty('title', 'link opens in new window');
        el.setProperty('target', '_blank');
    });
    $$('div.right-control').removeClass('off');

    if (document.id('homepage')) {
        this.HomePage();

        $$('div.nav_btm').each(function(el, index) {
            el.addEvent('click', function(evt) {
                evt.stop();
                this.FadeOutPanel(this.activePanel);
                this.activePanel = index;
                this.FadeInPanel(index, 'none');

            } .bind(this));
        } .bind(this));
    }
},
HomePage: function() {
    pageHash = window.location.hash;


    if (pageHash.length > 0) {
        pageHash = pageHash.substr(1, pageHash.length);

        if (document.id(pageHash)) {
            if (pageHash == 'slide1') { this.activePanel = 0; }
            if (pageHash == 'slide2') { this.activePanel = 1; }
            if (pageHash == 'slide3') { this.activePanel = 2; }
            if (pageHash == 'slide4') { this.activePanel = 3; }
            if (pageHash == 'slide5') { this.activePanel = 4; }
            if (pageHash == 'slide6') { this.activePanel = 5; }
            if (pageHash == 'slide7') { this.activePanel = 6; }
            if (pageHash == 'slide8') { this.activePanel = 7; }
            if (pageHash == 'slide9') { this.activePanel = 8; }
            if (pageHash == 'slide10') { this.activePanel = 9; }
            if (pageHash == 'slide11') { this.activePanel = 10; }
        }
    }

    

    panels = document.id('homepage').getElements('.product-holder');
    this.panelsCount = panels.length;
    panels.each(function(pan, index) {
        if (index != this.activePanel) {
            pan.setStyles({
                'opacity': 0,
                'display': 'none'
            });
        } else {
            pan.setStyles({
                'opacity': 1,
                'display': 'block'
            });
            leftClick = $$('.left-control  a');
            rightClick = $$('.right-control  a');

            leftClick.addEvent('click', function(evt) {
                evt.stop();
                if (this.activePanel > 0) {
                    this.FadeOutPanel(this.activePanel);
                    this.FadeInPanel(this.activePanel - 1, 'left');
                }
            } .bind(this));

            rightClick.addEvent('click', function(evt) {
                evt.stop();
                if (this.activePanel < (panels.length - 1)) {
                    this.FadeOutPanel(this.activePanel);
                    this.FadeInPanel(this.activePanel + 1, 'right');
                }
            } .bind(this));
        }
    } .bind(this));

},
FadeOutPanel: function(panel) {
    if (Browser.Engine.trident) {
        panels[panel].setStyle('display', 'none');
    } else {
        panels[panel].fade('out').setStyle('display', 'none');
    }
},
FadeInPanel: function(panel, direction) {
    if (Browser.Engine.trident) {
        panels[panel].setStyles({
            'opacity': '1',
            'display': 'block'
        });
    } else {
        panels[panel].fade('in').setStyle('display', 'block');
    }
    this.UpdateActivePanel(panel, direction);
    this.UpdatePagination();

},
UpdatePagination: function() {
    $$('div.nav_btm').each(function(el, index) {
        if (index == this.activePanel) {
            $$('div.nav_btm').removeClass('active');
            el.addClass('active');
        } else {
            el.removeClass('remove');
        }
    } .bind(this));
},
UpdateActivePanel: function(index, direction) {
    if (direction == 'right') {
        if (index == (this.panelsCount - 1)) {
            this.activePanel = (this.panelsCount - 1);
            document.id('slideControls').getElement('.right-control').addClass('off');
        } else {
            this.activePanel++;
            document.id('slideControls').getElement('.right-control').removeClass('off');
            document.id('slideControls').getElement('.left-control').removeClass('off');
        }
    }
    if (direction == 'left') {
        if (index == 0) {
            this.activePanel = 0;
            document.id('slideControls').getElement('.left-control').addClass('off');
        } else {
            this.activePanel--;
            document.id('slideControls').getElement('.left-control').removeClass('off');
            document.id('slideControls').getElement('.right-control').removeClass('off');
        }
    }
    if (direction == 'none') {
        if (index == (this.panelsCount - 1)) {
            this.activePanel = (this.panelsCount - 1);
            document.id('slideControls').getElement('.left-control').removeClass('off');
            document.id('slideControls').getElement('.right-control').addClass('off');

        } else if (index == 0) {
            this.activePanel = 0;
            document.id('slideControls').getElement('.left-control').addClass('off');
            document.id('slideControls').getElement('.right-control').removeClass('off');
        } else {
            document.id('slideControls').getElement('.left-control').removeClass('off');
            document.id('slideControls').getElement('.right-control').removeClass('off');
        }
    }
}
});

window.addEvents({
    'domready': function() {
        new PanteneGlobalHomePage({

        });
    }
});