/**
# mod_jcslide - JV Slide
# @version 1.6.x and 1.5.x
# ------------------------------------------------------------------------
# author    Open Source Code Solutions Co
# copyright Copyright (C) 2011 joomlavi.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL or later.
# Websites: http://www.joomlavi.com
# Technical Support:  http://www.joomlavi.com/my-tickets.html
-------------------------------------------------------------------------*/
var JVSlide = function (o) {
    var option;
    var value = {
        center: { x: '', y: '' },
        showingIndex: 0,
        smallSize: {},
        largeSize: {}
    }
    var element = {
        pics: [],
        panel: null,
        showing: null,
        next: null,
        prev: null
    }
    var setup = {
        init: function () {
            setup.option(o);
            setup.element();
            setup.value();
            setup.event();
            setup.prealoadImage(0);
        },
        element: function () {
            element.panel = $$(option.panel)[0];
            element.panel.css('height', option.panelHeight);
            element.pics = element.panel.find('.JVSlide_pic');
            element.control = element.panel.find('.JVSlide_control')[0];
        },
        option: function (o) {
            option = o;
        },
        value: function () {
            value.offset = element.panel.offset();
            value.center.x = value.offset.width / 2;

            value.largeSize.top = option.paddingTop;
            value.largeSize.left = value.center.x - option.largeSize.width / 2;
            value.largeSize.right = value.center.x + option.largeSize.width / 2;
            value.smallSize.top = (option.largeSize.height - option.smallSize.height) / 2 + option.paddingTop;
            value.smallSize.left = value.largeSize.left - option.space;
            value.smallSize.right = value.largeSize.right + option.space;
        },
        event: function () {
            if (element.pics.lenght <= 0) return;
            element.pics.each(function (el) {
                el.addEvent('click', function (e) {
                    if (this.actionClick) {
                        new Event(e).stop();
                        if (this.actionClick == 'next') public.next();
                        else if (this.actionClick == 'prev') public.prev();
                        element.pics.each(function (el) {
                            el.actionClick = 'wait';
                        });
                    }
                });
                if (option.showDes == 'hover') el.addEvent('mouseenter', function () {
                    if (this.actionClick) return;
                    action.showDes(this);
                }).addEvent('mouseleave', function () {
                    if (this.actionClick) return;
                    action.hideDes(this);
                });
            });
            element.control.find('.JVSlide_next')[0].addEvent('click', function () {
                public.next();
            });
            element.control.find('.JVSlide_prev')[0].addEvent('click', function () {
                public.prev();
            });
            if (option.showControl == 'hover') element.panel.addEvent('mouseenter', function () {
                action.showControl();
            }).addEvent('mouseleave', function () {
                action.hideControl();
            });
        },
        prealoadImage: function (i) {

            action.init();

        }
    }
    var action = {
        init: function () {
            if (element.pics.lenght <= 0) return;
            element.control.fx = create.fx(element.control);
            element.pics.each(function (el) {
                el.css({
                    width: option.smallSize.width,
                    height: option.smallSize.height,
                    top:value.smallSize.top,
                    left: value.smallSize.left
                });
            });
            action.setElement();
            element.prev.actionClick = 'prev';
            element.showing.actionClick = null;
            element.next.actionClick = 'next';
            element.showing.css('top',value.largeSize.top);
            create.fx(element.prev).start({
                top: [value.largeSize.top, value.smallSize.top],
                left: [value.center.x, value.smallSize.left],
                opacity: [1, 0.5],
                width: [0, option.smallSize.width],
                height: [0, option.smallSize.height]
            });
            create.fx(element.showing).start({
                left: [value.center.x, value.largeSize.left],
                width: [0, option.largeSize.width],
                height: [0, option.largeSize.height]
            });
            create.fx(element.next).start({
                top: [value.largeSize.top, value.smallSize.top],
                left: [value.center.x, value.smallSize.right - option.smallSize.width],
                width: [0, option.smallSize.width],
                opacity: [1, 0.5],
                height: [0, option.smallSize.height]
            });
            element.prev.css({ 'display': 'block', 'z-index': 1 });
            element.showing.css({ 'display': 'block', 'z-index': 3 });
            element.next.css({ 'display': 'block', 'z-index': 1 });
        },
        next: function () {
            //var a = element.showing.pos();
            var fx = create.fx(element.showing).chain(function () {
                element.showing.css('z-index', 2);
                fx.start({
                    left: [element.showing.css('left'), value.smallSize.left],
                    height: [option.largeSize.height, option.smallSize.height],
                    width: [option.largeSize.width, option.smallSize.width],
                    top: [value.largeSize.top, value.smallSize.top],
                    opacity: [1, 0.5]
                }).chain(function () {
                    element.showing.css('z-index', 1);
                    element.showing.actionClick = 'prev';
                });
            }).start({
                left: [element.showing.css('left'), value.center.x - option.largeSize.width]
            });
            var eNextWait = action.getElement(value.showingIndex + 2);

            element.next.css('z-index', 2);
            var fxNext = create.fx(element.next).chain(function () {
                element.next.css('z-index', 3);
                element.prev.css('display', 'none');
                eNextWait.css({ 'display': 'block', top: value.smallSize.top, 'z-index': 1, opacity: 0.5 });
                fxNext.start({
                    left: [element.next.css('left'), value.largeSize.left]
                }).chain(function () {
                    element.next.actionClick = null;
                    if (option.showDes == 'alway') {
                        action.showDes(element.next);
                    }
                });

                create.fx(eNextWait).start({
                    left: [value.center.x - (option.smallSize.width / 2), value.smallSize.right - option.smallSize.width]
                }).chain(function () { eNextWait.actionClick = 'next' });
            }).start({
                left: [element.next.css('left'), value.center.x],
                top: [value.smallSize.top, value.largeSize.top],
                height: [option.smallSize.height, option.largeSize.height],
                width: [option.smallSize.width, option.largeSize.width],
                opacity: [0.5, 1]
            });
            if (option.showDes == 'alway') action.hideDes(element.showing);
        },
        prev: function () {
            var fx = create.fx(element.showing).chain(function () {
                element.showing.css('z-index', 2);
                fx.start({
                    left: [element.showing.css('left'), value.smallSize.right - option.smallSize.width],
                    height: [option.largeSize.height, option.smallSize.height],
                    width: [option.largeSize.width, option.smallSize.width],
                    top: [value.largeSize.top, value.smallSize.top],
                    opacity: [1, 0.5]
                }).chain(function () {
                    element.showing.css('z-index', 1);
                    element.showing.actionClick = 'next';
                });
            }).start({
                left: [element.showing.css('left'), value.center.x]
            });

            var ePrevWait = action.getElement(value.showingIndex - 2);
            element.prev.css('z-index', 2);
            var fxPrev = create.fx(element.prev).chain(function () {
                element.prev.css('z-index', 3);
                element.next.css('display', 'none');
                ePrevWait.css({ 'display': 'block', top: value.smallSize.top, 'z-index': 1, opacity: 0.5 });
                fxPrev.start({
                    left: [element.prev.css('left'), value.largeSize.left]
                }).chain(function () {
                    element.prev.actionClick = null;
                    if (option.showDes == 'alway') {
                        action.showDes(element.prev);
                    }
                });
                create.fx(ePrevWait).chain(function () {
                    ePrevWait.actionClick = 'prev';
                }).start({
                    left: [value.center.x - (option.smallSize.width / 2), value.smallSize.left]
                });
            }).start({
                left: [element.prev.css('left'), value.center.x - option.largeSize.width],
                top: [value.smallSize.top, value.largeSize.top],
                height: [option.smallSize.height, option.largeSize.height],
                width: [option.smallSize.width, option.largeSize.width],
                opacity: [0.5, 1]
            });
            if (option.showDes == 'alway') action.hideDes(element.showing);
        },
        setElement: function () {
            value.showingIndex = value.showingIndex > element.pics.length - 1 ? 0 : value.showingIndex;
            value.showingIndex = value.showingIndex < 0 ? element.pics.length - 1 : value.showingIndex;
            element.showing = action.getElement(value.showingIndex);
            element.prev = action.getElement(value.showingIndex - 1);
            element.next = action.getElement(value.showingIndex + 1);
        },
        getElement: function (i) {
            i = i > element.pics.length - 1 ? i - element.pics.length : i;
            i = i < 0 ? element.pics.length + i : i;
            return element.pics[i];
        },
        showDes: function (el) {
            var desE = el.find('.JVSlide_description')[0];
            desE.css({
                display: 'block',
                height: option.descriptionHeight
            });
            if (!desE.fx) {
                desE.fx = create.fx(desE);
            }
            desE.fx.start({
                bottom: [-option.descriptionHeight, 0],
                opacity: [0, 0.5]
            });
        },
        hideDes: function (el) {
            var desE = el.find('.JVSlide_description')[0];
            if (!desE.fx) {
                desE.fx = create.fx(desE);
            }
            desE.fx.start({
                bottom: [0, -option.descriptionHeight],
                opacity: [0.5, 0]
            }).chain(function () {
                desE.css({
                    display: 'none'
                });
            });
        },
        showControl: function () {
            element.control.css('display', 'block');
            element.control.fx.start({
                opacity: [0, 1]
            })
        },
        hideControl: function () {
            element.control.fx.start({
                opacity: [1, 0]
            }).chain(function () {
                element.control.css('display', 'none');
            }); ;
        }
    }
    var create = {
        fx: function (el) {
            return (new J.Morph(el, {
                duration: option.duration,
                transition: Fx.Transitions.sineOut
            }));
        }
    }
    var public = {
        prev: function () {
            action.setElement();
            action.prev();
            value.showingIndex--;
        },
        next: function () {
            action.setElement();
            action.next(); value.showingIndex++;
        }
    }
    setup.init();
    //action.init();
    //action.autoPlay();
}