if(typeof SODON == "undefined" || !SODON){ var SODON = {}; SODON.util = {}; SODON.widget = {}; SODON.example = {}; }

(function() {

    /**
     * @namespace SODON.widget
     * @class JQScrollView
     * @constructor
     * @param {HTMLElement | String} container
     * @param {Object} config
     */
    SODON.widget.JQGalleryView = function(images, doms, config) {
        this.init.apply(this, arguments);
    };

    SODON.widget.JQGalleryView.prototype = {

        images: null,               // Buh images -uudiig hadgaldag
        config: null,               // Buh tohirgoonuudiig hadgaldag
        currIndex: 0,               // Gol guideg index
        preIndex: 0,                // umnuh guideg index -iig hadgalah zorilgotoi
        thumbsCurrIndex: 0,         // umnuh guideg index -iig hadgalah zorilgotoi
        thumbsLimitIndex: 0,        // umnuh guideg index -iig hadgalah zorilgotoi
        currimgStatus: "currimg1",  // currimg1 | currimg2 Ene ni yag odoo yamar currimg -eer ni garch baigaag ni zaaj baih yum.
                                    // Uuniig ashiglan tuunii daraa yamar currimg -ee haruulahiig medeh yum.

        // for doms
        info: null,
        desc: null,
        imgTarget: null,
        currimg1: null,
        currimg1Str: "",
        currimg1Desc: null,
        currimg2: null,
        currimg2Str: "",
        currimg2Desc: null,
        currimgPrevBtn: null,
        currimgNextBtn: null,
        thumbsMask: null,
        thumbs: null,
        thumbsItems: null,
        thumbsSep: null,
        thumbsPrevBtn: null,
        thumbsNextBtn: null,
        // end of doms

        // for config
        currimgEffect: "opacity", // opacity | L2R | R2L | T2B | B2T current image's effect yum.
        currimgWidth: 500,        // current image iin urgun
        currimgHeight: 375,       // current image iin undur
        thumbsItemWidth: 100,     // Thumbs item iin urgun
        thumbsItemHeigth: 75,     // Thumbs item iin undur
        thumbsItemSpace: 10,      // Thumbs item hoorondiin zai
        thumbsItemMiddle: false,  // Thumbs item -uudiig golluulah esehiig ni shiiddne. Ingehiin tuld css deeree position absolute bolon position relative gesen tohirgoonuudiig hiih heregtei.
        log: false,
        // end of config

        /* FOR INITIALIZE METHODS START */
        /**
         * @description
         * @param {Array} images     zurgiin talaarh data
         * @param {Object} doms      elements
         * @param {Object} config    tohiruulga
         */
        init: function(images, doms, config) {

            this.images = images;
            this.config = {};

            // call set doms
            this.__setDoms(doms);
            // call set config
            this.__setConfig(config);
            // call initialize style
            this.__initCSS();
            // call render image target
            this.__renderImgTarget();
            // call initialize events
            this.__initEvents();
        },

        /**
         * @description
         * @method __setDoms
         * @param {Object} doms
         */
        __setDoms: function(doms) {
            if ( typeof doms.info != "undefined" )            this.info = $("#" + doms.info);
            if ( typeof doms.desc != "undefined" )            this.desc = $("#" + doms.desc);
            if ( typeof doms.imgTarget != "undefined" ) {
                this.imgTarget =       $("#" + doms.imgTarget);
                this.currimg1 =        $("#" + doms.imgTarget + " .currimg1");
                this.currimg1Str =     "#" + doms.imgTarget + " .currimg1";
                this.currimg2 =        $("#" + doms.imgTarget + " .currimg2");
                this.currimg2Str =     "#" + doms.imgTarget + " .currimg2";
            }
            if ( typeof doms.currimgPrevBtn != "undefined" )  this.currimgPrevBtn =  $("#" + doms.currimgPrevBtn);
            if ( typeof doms.currimgNextBtn != "undefined" )  this.currimgNextBtn =  $("#" + doms.currimgNextBtn);
            if ( typeof doms.thumbsMask != "undefined" )      this.thumbsMask =      $("#" + doms.thumbsMask);
            if ( typeof doms.thumbs != "undefined" ) {
                this.thumbs =          $("#" + doms.thumbs);
                this.thumbsItems =     $("#" + doms.thumbs + " > li.item");
                this.thumbsItemsStr =  "#" + doms.thumbs + " > li.item";
                this.thumbsSep =       $("#" + doms.thumbs + " > li.sep");
            }
            if ( typeof doms.thumbsPrevBtn != "undefined" )   this.thumbsPrevBtn =   $("#" + doms.thumbsPrevBtn);
            if ( typeof doms.thumbsNextBtn != "undefined" )   this.thumbsNextBtn =   $("#" + doms.thumbsNextBtn);
        },

        /**
         * @description
         * @method __setConfig
         * @param {Object} config
         */
        __setConfig: function(config) {
            if ( typeof config.currimgEffect != "undefined" )    this.config.currimgEffect =     config.currimgEffect;
            if ( typeof config.currimgWidth != "undefined" )     this.config.currimgWidth =      config.currimgWidth;
            if ( typeof config.currimgHeight != "undefined" )    this.config.currimgHeight =     config.currimgHeight;
            if ( typeof config.thumbsItemWidth != "undefined" )  this.config.thumbsItemWidth =   config.thumbsItemWidth;
            if ( typeof config.thumbsItemHeight != "undefined" ) this.config.thumbsItemHeight =  config.thumbsItemHeight;
            if ( typeof config.thumbsItemSpace != "undefined" )  this.config.thumbsItemSpace =   config.thumbsItemSpace;
            if ( typeof config.thumbsItemMiddle != "undefined" ) this.config.thumbsItemMiddle =  config.thumbsItemMiddle;
            if ( typeof config.thumbsMaskSize != "undefined" )   this.config.thumbsMaskSize =    config.thumbsMaskSize;
            if ( typeof config.log != "undefined" )              this.config.log =               config.log;
            // set thumbsLimit
            this.thumbsLimitIndex = (this.images.length - this.config.thumbsMaskSize);
        },

        /**
         * @description render image target's html
         * @method __renderImgTarget
         */
        __renderImgTarget: function() {

            // currimg1 -iig update hiij bn.
            this.__setCurrimg1();
            // desc -iig update hiij bn.
            this.__setDesc();
            // info -iig update hiij bn.
            this.__setInfo();
        },

        /**
         * @description Buh CSS -iig initialize hiideg method.
         * @method __initCSS
         */
        __initCSS: function() {
            this.__initImgTargetCSS();
            this.__initThumbsCSS();
        },

        /**
         * @description Image target's CSS -iig initialize hiideg method.
         * @method __initImgTargetCSS
         */
        __initImgTargetCSS: function() {
            //
            this.imgTarget.css({
                "position": "relative",
                "width": this.config.currimgWidth + "px",
                "height": this.config.currimgHeight + "px"
            });
            //
            this.currimg1.css({
                "position": "absolute",
                "left": "0px",
                "top": "0px",
                "z-index": "1"
            });
            //
            this.currimg2.css({
                "position": "absolute",
                "left": "0px",
                "top": "0px",
                "opacity": "0",
                "z-index": "0"
            });
        },

        /**
         * @description thumbs's CSS -iig initialize hiideg method.
         * @method __initThumbsCSS
         */
        __initThumbsCSS: function() {
            var self = this;
            // for thumbs-mask start
            this.thumbsMask.css({
                "position": "relative",
                "overflow": "hidden",
                "width": ( this.config.thumbsMaskSize * ( this.config.thumbsItemWidth + this.config.thumbsItemSpace ) - this.config.thumbsItemSpace ) + "px",
                "height": this.config.thumbsItemHeight + "px"
            });
            // end of thumbs-mask
            // for thumbs start
            this.thumbs.css({
                "position": "absolute",
                "left": "0px",
                "top": "0px",
                "width": ( this.images.length * ( this.config.thumbsItemWidth + this.config.thumbsItemSpace ) ) + "px"
            });
            // end of thumbs
            //
            this.thumbsItems.css({
                "float": "left",
                "overflow": "hidden",
                "width": this.config.thumbsItemWidth + "px",
                "height": this.config.thumbsItemHeight + "px"
            });
            //
            this.thumbsSep.css({
                "float": "left",
                "overflow": "hidden",
                "width": this.config.thumbsItemSpace + "px",
                "height": this.config.thumbsItemHeight + "px"
            });
            // for thumbs start
            if ( this.thumbsItemMiddle ) {
                $(this.thumbsItemsStr + " img").each(function(i, item) {
                    $(this).css({
                        "left": self.__getThumbItemSize(i)["left"] + "px",
                        "top": self.__getThumbItemSize(i)["top"] + "px"
                    });
                });
            }
            // end of thumbs
            // for thumbs set sel
            this.__setThumbsItemSel();
            // end of thumbs
        },

        /**
         * @description Buh events -uudiig initialize hiideg method.
         * @method __initEvents
         */
        __initEvents: function() {
            this.__initImgTargetEvents();
            this.__initThumbsEvents();
        },

        /**
         * @description Image target's events -uudiig initialize hiideg method.
         * @method __initImgTargetEvents
         */
        __initImgTargetEvents: function() {
            var self = this;
            this.currimgPrevBtn.bind("click", function(event) {
                event.preventDefault();
                self.__currimgPrevMove();
            });
            this.currimgNextBtn.bind("click", function(event) {
                event.preventDefault();
                self.__currimgNextMove();
            });
        },

        /**
         * @description Thumbs events -uudiig initialize hiideg method.
         * @method __initThumbsEvents
         */
        __initThumbsEvents: function() {
            var self = this;
            this.thumbsPrevBtn.bind("click", function(event) {
                event.preventDefault();
                self.__thumbsPrevMove();
            });
            this.thumbsNextBtn.bind("click", function(event) {
                event.preventDefault();
                self.__thumbsNextMove();
            });
            this.thumbsItems.each(function(i, item){
                $(this).bind("click", {i: i}, function(event) {
                    if ( self.config.log ) console.log("==== " + event.data.i);
                    self.currIndex = event.data.i;
                    self.__changeCurrimg();
                    self.__setThumbsItemSel();
                });
            });
        },
        /* END OF INITIALIZE METHODS */

        /* FOR CONTROLLER METHODS START */
        /**
         * @description current image -iig solidog method yum.
         * @method __changeCurrimg
         */
        __changeCurrimg: function() {
            var self = this;
            if ( this.currimgEffect == "opacity" ) {
                if ( this.currimgStatus == "currimg1" ) {
                    if ( this.config.log ) console.log("status: currimg1");
                    // currimg1 -iig beldej bn.
                    this.currimg1.css({
                        "z-index": "1"
                    });
                    // currimg2 -iig beldej bn.
                    this.currimg2.css({
                        "opacity": "0",
                        "z-index": "0"
                    });
                    // desc -iig update hiij bn.
                    this.__setDesc();
                    // info -iig update hiij bn.
                    this.__setInfo();
                    // currimg2 -iig update hiij bn.
                    this.__setCurrimg2();
                    // zurgaa achaalj duussanii daraagaar effect ni ajillaj ehleh yostoi.
                    $(this.currimg2Str + " > img").load(function(){
                        if ( self.config.log ) console.log("currimg2>img loaded");
                        self.__hideDesc();
                        self.__hideOpacityCurrimg1();
                        self.__showOpacityCurrimg2();
                        self.currimgStatus = "currimg2";
                    });
                } else {
                    if ( this.config.log ) console.log("status: currimg2");
                    // currimg2 -iig beldej bn.
                    this.currimg2.css({
                        "z-index": "1"
                    });
                    // currimg1 -iig beldej bn.
                    this.currimg1.css({
                        "opacity": "0",
                        "z-index": "0"
                    });
                    // desc -iig update hiij bn.
                    this.__setDesc();
                    // info -iig update hiij bn.
                    this.__setInfo();
                    // currimg1 -iig update hiij bn.
                    this.__setCurrimg1();
                    // zurgaa achaalj duussanii daraagaar effect ni ajillaj ehleh yostoi.
                    $(this.currimg1Str + " > img").load(function(){
                        if ( self.config.log ) console.log("currimg1>img loaded");
                        self.__hideDesc();
                        self.__hideOpacityCurrimg2();
                        self.__showOpacityCurrimg1();
                        // odoo currimg1 ni toglono gesen ug.
                        self.currimgStatus = "currimg1";
                    });
                }
            }
        },
        /**
         * @description current image -iin zuun tiish ni hudulgugch method.
         * @method __currimgPrevMove
         */
        __currimgPrevMove: function() {
            if ( this.currIndex > 0 ) {
                if ( this.config.log ) console.log("currimg's prev btn");
                this.currIndex--;
                this.__changeCurrimg();
                this.__setThumbsItemSel();
            }
        },

        /**
         * @description current image -iin baruun tiish ni hudulgugch method.
         * @method __currimgNextMove
         */
        __currimgNextMove: function() {
            if ( this.currIndex < this.images.length-1 ) {
                if ( this.config.log ) console.log("currimg's next btn");
                this.currIndex++;
                this.__changeCurrimg();
                this.__setThumbsItemSel();
            }
        },

        /**
         * @description thumbs -iin zuun tiish ni hudulgugch method.
         * @method __thumbsPrevMove
         */
        __thumbsPrevMove: function() {

            if ( this.thumbsCurrIndex > 0 ) {
                this.thumbsCurrIndex--;
                this.__moveThumbs("prev");
            }
        },

        /**
         * @description thumbs -iin baruun tiish ni hudulgugch method.
         * @method __thumbNextMove
         */
        __thumbsNextMove: function() {
            if ( this.thumbsCurrIndex < this.thumbsLimitIndex ) {
                this.thumbsCurrIndex++;
                this.__moveThumbs("next");
            }
        },
        /* END OF CONTROLLER METHODS */


        /* FOR OPACITY(CURRIMG'S EFFECT) METHODS START */

        /**
         * @description currimg1 -iig haragdahgui bolgodog method.
         * @method __hideCurrimg1
         */
        __hideOpacityCurrimg1: function() {
            this.currimg1.animate({
                opacity: 0
            }, 500);
        },

        /**
         * @description currimg1 -iig haragddag bolgodog method.
         * @method __showCurrimg1
         */
        __showOpacityCurrimg1: function() {
            var self = this;
            this.currimg1.animate({
                opacity: 1
            }, 500, function(){
                self.__showDesc();
            });
        },

        /**
         * @description currimg2 -iig haragdahgui bolgodog method.
         * @method __hideCurrimg2
         */
        __hideOpacityCurrimg2: function() {
            this.currimg2.animate({
                opacity: 0
            }, 500);
        },

        /**
         * @description currimg2 -iig haragddag bolgodog method.
         * @method __showCurrimg2
         */
        __showOpacityCurrimg2: function() {
            var self = this;
            this.currimg2.animate({
                opacity: 1
            }, 500, function(){
                self.__showDesc();
            });
        },

        /* END OF OPACITY(CURRIMG'S EFFECT) METHODS */


        /* FOR TUSHAAL GUITSETGEGCH(DO) METHODS START */

        /**
         * @description currimg1 -iig update hiideg method.
         * @method __setCurrimg1
         */
        __setCurrimg1: function() {
            var imgStr = '<img src="' + this.__getCurrImg()["url"] + '" width="' + this.__getCurrImgSize()["width"] + '" height="' + this.__getCurrImgSize()["height"] + '" />';
            this.currimg1.html(imgStr);
            this.currimg1.css({
                "left": this.__getCurrImgSize()["left"] + "px",
                "top": this.__getCurrImgSize()["top"] + "px"
            });
        },

        /**
         * @description currimg2 -iig update hiideg method.
         * @method __setCurrimg2
         */
        __setCurrimg2: function() {
            var imgStr = '<img src="' + this.__getCurrImg()["url"] + '" width="' + this.__getCurrImgSize()["width"] + '" height="' + this.__getCurrImgSize()["height"] + '" />';
            this.currimg2.html(imgStr);
            this.currimg2.css({
                "left": this.__getCurrImgSize()["left"] + "px",
                "top": this.__getCurrImgSize()["top"] + "px"
            });
        },

        /**
         * @description set info
         * @method __setInfo
         */
        __setInfo: function() {
            if ( this.info ) {
                if ( this.config.log ) console.log("set info");
                if ( this.config.log ) console.log("set info== " + (this.currIndex+1));
                this.info.html("" + (this.currIndex+1) + "/" + this.images.length);
            }
        },

        /**
         * @description hide desc
         * @method __hideDesc
         */
        __setDesc: function() {
            if ( this.desc ) {
                if ( this.config.log ) console.log("set desc");
                this.desc.html(this.__getCurrImg()["desc"]);
            }
        },

        /**
         * @description hide desc
         * @method __hideDesc
         */
        __hideDesc: function() {
            if ( this.config.log ) console.log("__hideDesc");
            this.desc.css({
                "visibility": "hidden"
            });
        },

        /**
         * @description show desc
         * @method __showDesc
         */
        __showDesc: function() {
            if ( this.config.log ) console.log("__showDesc");
            this.desc.css({
                "visibility": "visible"
            });
        },

        /**
         * @description Hudulguun hiideg method. Zuvhun tushaal bieluulegch method yum.
         * @method __moveThumbs
         */
        __moveThumbs: function(status) {
            if ( status == "next" ) {
                this.thumbs.animate({
                    left: '-' + (this.thumbsCurrIndex * ( this.config.thumbsItemWidth + this.config.thumbsItemSpace ))
                }, 500, 'linear', function() {
                    // Animation complete.
                });
            } else if ( status == "prev" ) {
                this.thumbs.animate({
                    left: '-' + (this.thumbsCurrIndex * ( this.config.thumbsItemWidth + this.config.thumbsItemSpace ))
                }, 500, 'linear', function() {
                    // Animation complete.
                });
            }
        },

        /**
         * @description Thumbs's item -uudiin sel class -iig tohiruulagch.
         * @method __setThumbsItemSel
         */
        __setThumbsItemSel: function() {
            this.thumbsItems.removeClass("sel");
            $(this.thumbsItemsStr + ":eq(" + this.currIndex + ")").addClass("sel");
        },

        /**
         * @description get current img
         * @method __getCurrImg
         * @return Object
         */
        __getCurrImgSize: function() {
            var width = parseInt(this.images[this.currIndex]["img"]["width"]);
            var height = parseInt(this.images[this.currIndex]["img"]["height"]);
            var cwidth = parseInt(this.config.currimgWidth);
            var cheight = parseInt(this.config.currimgHeight);
            if ( width/height > cwidth/cheight ) {
                return {"width": cwidth, "height": height*(cwidth/width), "left": 0, "top": (cheight-height*(cwidth/width))/2};
            } else {
                return {"width": width*(cheight/height), "height": cheight, "left": (cwidth-width*(cheight/height))/2, "top": 0};
            }
        },

        /**
         * @description get thumb item img
         * @method __getThumbItemSize
         * @param {Integer} index
         * @return Object
         */
        __getThumbItemSize: function(index) {
            var width = parseInt(this.images[index]["thumb"]["width"]);
            var height = parseInt(this.images[index]["thumb"]["height"]);
            var cwidth = parseInt(this.config.thumbsItemWidth);
            var cheight = parseInt(this.config.thumbsItemHeight);
            if ( width/height > cwidth/cheight ) {
                return {"width": cwidth, "height": height*(cwidth/width), "left": 0, "top": (cheight-height*(cwidth/width))/2};
            } else {
                return {"width": width*(cheight/height), "height": cheight, "left": (cwidth-width*(cheight/height))/2, "top": 0};
            }
        },

        /**
         * @description get current img
         * @method __getCurrImg
         * @return Object
         */
        __getCurrImg: function() {
            return this.images[this.currIndex]["img"];
        },

        /**
         * @description get current thum
         * @method __getCurrThumb
         * @return Object
         */
        __getCurrThumb: function() {
            return this.images[this.currIndex]["thumb"];
        }
        /* END OF TUSHAAL GUITSETGEGCH(DO) METHODS */
    }
})();