
/*
* Title                   : Wall/Grid Gallery
* Version                 : 1.2
* File                    : jquery.dop.WallGridGallery.js
* File Version            : 1.3
* Created / Last Modified : 20 May 2011
* Author                  : Marius-Cristian Donea
* Copyright               : © 2011 Marius-Cristian Donea
* Website                 : http://www.mariuscristiandonea.com
* Description             : Wall/Grid jQuery plugin.
*/

(function($){
    $.fn.DOPWallGridGallery = function(options){
        var Data = {'Content':''},

        UniqueID = '',

        Container = this,
        
        Width = '900',
        Height = '348',
        BgColor = 'ffffff',
        BgImage = 'none',
        BgAlpha = '100',
        NoLines = '3',
        NoColumns = '4',

        ThumbnailsSpacing = 15,
        ThumbnailsPaddingTop = 0,
        ThumbnailsPaddingRight = 0,
        ThumbnailsPaddingBottom = 0,
        ThumbnailsPaddingLeft = 0,
        ThumbnailsNavigation = 'mouse',
        ThumbnailsScrollScrubColor = '777777',
        ThumbnailsScrollBarColor = 'e0e0e0',

        ThumbnailLoader = 'assets/gui/images/ThumbnailLoader.gif',
        ThumbnailWidth = 200,
        ThumbnailHeight = 100,
        ThumbnailAlpha = '80',
        ThumbnailAlphaHover = '100',
        ThumbnailBgColor = 'cccccc',
        ThumbnailBgColorHover = '000000',
        ThumbnailBorderSize = 0,
        ThumbnailBorderColor = 'cccccc',
        ThumbnailBorderColorHover = '000000',
        ThumbnailPaddingTop = 3,
        ThumbnailPaddingRight = 3,
        ThumbnailPaddingBottom = 3,
        ThumbnailPaddingLeft = 3,

        ImagePosition = 'document',
        ImageWindowColor = '000000',
        ImageWindowAlpha = 80,
        ImageLoader = 'assets/gui/images/ImageLoader.gif',
        ImageBgColor = '000000',
        ImageBgAlpha = '100',
        ImageMarginTop = 70,
        ImageMarginRight = 70,
        ImageMarginBottom = 70,
        ImageMarginLeft = 70,
        ImagePaddingTop = 10,
        ImagePaddingRight = 10,
        ImagePaddingBottom = 10,
        ImagePaddingLeft = 10,

        NavigationPrevious = 'none',
        NavigationBack = 'none',
        NavigationNext = 'none',
        
        TooltipEnabled = 'false',
        TooltipBgColor = 'ffffff',
        TooltipStrokeColor = '000000',
        TooltipTextColor = '000000',
        
        Images = new Array(),
        Thumbs = new Array(),
        Links = new Array(),
        LinksTarget = new Array(),
        Description = new Array(),
        noImages = 0,
        
        BgImageLoaded = false,
        BgImageWidth = 0,
        BgImageHeight = 0,

        currentImage = 0,
        imageLoaded = false,
        ImageWidth = 0,
        ImageHeight = 0,

        methods = {
                    init:function( ){// Init Plugin.
                        return this.each(function(){
                            UniqueID = prototypes.randomString(10);
                            if (options){
                                $.extend(Data, options);
                            }
                            methods.parseData(Data['Content']);
                            $(window).bind('resize.DOPWallGridGallery', methods.initRP);
                            $(window).bind('scroll.DOPWallGridGallery', methods.initRP);
                        });
                    },
                    parseData:function(data){// Parse the Settings XML.
                        var settings = data.split('|||||')[0],
                        content = data.split('|||||')[1],
                        settingsItem = new Array(),
                        images = new Array(), i;

                        settingsItem = settings.split(';');
                        images = content.split(';;;');

                        if (settingsItem[0] != 'default0123456789'){
                            Width = settingsItem[0];
                        }
                        if (settingsItem[1] != 'default0123456789'){
                            Height = settingsItem[1];
                        }
                        if (settingsItem[2] != 'default0123456789'){
                            BgColor = settingsItem[2];
                        }
                        if (settingsItem[3] != 'default0123456789'){
                            BgImage = settingsItem[3];
                        }
                        if (settingsItem[4] != 'default0123456789'){
                            BgAlpha = parseInt(settingsItem[4]);
                        }
                        if (settingsItem[5] != 'default0123456789'){
                            NoLines = settingsItem[5];
                        }
                        if (settingsItem[6] != 'default0123456789'){
                            NoColumns = settingsItem[6];
                        }

                        if (settingsItem[7] != 'default0123456789'){
                            ThumbnailsSpacing = parseInt(settingsItem[7]);
                        }
                        if (settingsItem[8] != 'default0123456789'){
                            ThumbnailsPaddingTop = parseInt(settingsItem[8]);
                        }
                        if (settingsItem[9] != 'default0123456789'){
                            ThumbnailsPaddingRight = parseInt(settingsItem[9]);
                        }
                        if (settingsItem[10] != 'default0123456789'){
                            ThumbnailsPaddingBottom = parseInt(settingsItem[10]);
                        }
                        if (settingsItem[11] != 'default0123456789'){
                            ThumbnailsPaddingLeft = parseInt(settingsItem[11]);
                        }
                        if (settingsItem[12] != 'default0123456789'){
                            ThumbnailsNavigation = settingsItem[12];
                        }
                        if (settingsItem[13] != 'default0123456789'){
                            ThumbnailsScrollScrubColor = settingsItem[13];
                        }
                        if (settingsItem[14] != 'default0123456789'){
                            ThumbnailsScrollBarColor = settingsItem[14];
                        }

                        if (settingsItem[15] != 'default0123456789'){
                            ThumbnailLoader = settingsItem[15];
                        }
                        if (settingsItem[16] != 'default0123456789'){
                            ThumbnailWidth = parseInt(settingsItem[16]);
                        }
                        if (settingsItem[17] != 'default0123456789'){
                            ThumbnailHeight = parseInt(settingsItem[17]);
                        }
                        if (settingsItem[18] != 'default0123456789'){
                            ThumbnailAlpha = parseInt(settingsItem[18]);
                        }
                        if (settingsItem[19] != 'default0123456789'){
                            ThumbnailAlphaHover = parseInt(settingsItem[19]);
                        }
                        if (settingsItem[20] != 'default0123456789'){
                            ThumbnailBgColor = settingsItem[20];
                        }
                        if (settingsItem[21] != 'default0123456789'){
                            ThumbnailBgColorHover = settingsItem[21];
                        }
                        if (settingsItem[22] != 'default0123456789'){
                            ThumbnailBorderSize = parseInt(settingsItem[22]);
                        }
                        if (settingsItem[23] != 'default0123456789'){
                            ThumbnailBorderColor = settingsItem[23];
                        }
                        if (settingsItem[24] != 'default0123456789'){
                            ThumbnailBorderColorHover = settingsItem[24];
                        }
                        if (settingsItem[25] != 'default0123456789'){
                            ThumbnailPaddingTop = parseInt(settingsItem[25]);
                        }
                        if (settingsItem[26] != 'default0123456789'){
                            ThumbnailPaddingRight = parseInt(settingsItem[26]);
                        }
                        if (settingsItem[27] != 'default0123456789'){
                            ThumbnailPaddingBottom = parseInt(settingsItem[27]);
                        }
                        if (settingsItem[28] != 'default0123456789'){
                            ThumbnailPaddingLeft = parseInt(settingsItem[28]);
                        }

                        if (settingsItem[29] != 'default0123456789'){
                            ImagePosition = settingsItem[29];
                        }
                        if (settingsItem[30] != 'default0123456789'){
                            ImageWindowColor = settingsItem[30];
                        }
                        if (settingsItem[31] != 'default0123456789'){
                            ImageWindowAlpha = parseInt(settingsItem[31]);
                        }
                        if (settingsItem[32] != 'default0123456789'){
                            ImageLoader = settingsItem[32];
                        }
                        if (settingsItem[33] != 'default0123456789'){
                            ImageBgColor = settingsItem[33];
                        }
                        if (settingsItem[34] != 'default0123456789'){
                            ImageBgAlpha = settingsItem[34];
                        }
                        if (settingsItem[35] != 'default0123456789'){
                            ImageMarginTop = parseInt(settingsItem[35]);
                        }
                        if (settingsItem[36] != 'default0123456789'){
                            ImageMarginRight = parseInt(settingsItem[36]);
                        }
                        if (settingsItem[37] != 'default0123456789'){
                            ImageMarginBottom = parseInt(settingsItem[37]);
                        }
                        if (settingsItem[38] != 'default0123456789'){
                            ImageMarginLeft = parseInt(settingsItem[38]);
                        }
                        if (settingsItem[39] != 'default0123456789'){
                            ImagePaddingTop = parseInt(settingsItem[39]);
                        }
                        if (settingsItem[40] != 'default0123456789'){
                            ImagePaddingRight = parseInt(settingsItem[40]);
                        }
                        if (settingsItem[41] != 'default0123456789'){
                            ImagePaddingBottom = parseInt(settingsItem[41]);
                        }
                        if (settingsItem[42] != 'default0123456789'){
                            ImagePaddingLeft = parseInt(settingsItem[42]);
                        }

                        if (settingsItem[43] != 'default0123456789'){
                            NavigationPrevious = settingsItem[43];
                        }
                        if (settingsItem[44] != 'default0123456789'){
                            NavigationBack = settingsItem[44];
                        }
                        if (settingsItem[45] != 'default0123456789'){
                            NavigationNext = settingsItem[45];
                        }

                        if (settingsItem[46] != 'default0123456789'){
                            TooltipEnabled = settingsItem[46];
                        }
                        if (settingsItem[47] != 'default0123456789'){
                            TooltipBgColor = settingsItem[47];
                        }
                        if (settingsItem[48] != 'default0123456789'){
                            TooltipStrokeColor = settingsItem[48];
                        }
                        if (settingsItem[49] != 'default0123456789'){
                            TooltipTextColor = settingsItem[49];
                        }

                        for (i=0; i<images.length; i++){
                            Images.push(images[i].split(':::')[0]);
                            Thumbs.push(images[i].split(':::')[1]);
                            if (images[i].split(':::')[2] == 'default0123456789'){
                                Description.push('');
                            }
                            else{
                                Description.push(images[i].split(':::')[2]);
                            }
                            if (images[i].split(':::')[3] == 'default0123456789'){
                                Links.push('');
                            }
                            else{
                                Links.push(images[i].split(':::')[3]);
                            }
                            if (images[i].split(':::')[4] == 'default0123456789'){
                                LinksTarget.push('');
                            }
                            else{
                                LinksTarget.push(images[i].split(':::')[4]);
                            }
                        }

                        noImages = Images.length;
                        var aux;

                        if (NoLines == 'auto' && NoColumns == 'auto'){
                            NoLines = Math.round(Math.sqrt(noImages));
                            NoColumns = parseInt(noImages/NoLines);

                            if (NoLines*NoColumns < noImages){
                                if (NoLines == NoColumns) NoLines++;
                                else if (NoLines > NoColumns) NoColumns++;
                            }
                            if (NoLines < NoColumns){
                                aux = NoColumns;
                                NoColumns = NoLines;
                                NoLines = aux;
                            }
                        }
                        else if (NoLines == 'auto'){
                            NoColumns = parseInt(NoColumns);
                            if (noImages%NoColumns != 0){
                                NoLines = parseInt(noImages/NoColumns)+1;
                            }
                            else{
                                NoLines = noImages/NoColumns;
                            }
                        }
                        else{
                            NoLines = parseInt(NoLines);
                            if (noImages%NoLines != 0){
                                NoColumns = parseInt(noImages/NoLines)+1;
                            }
                            else{
                                NoColumns = noImages/NoLines;
                            }
                        }

                        methods.initGallery();
                    },
                    initGallery:function(){// Init the Gallery
                        var ImageHTML = new Array(),
                        NavigationHTML = new Array(),
                        HTML = new Array();

                        ImageHTML.push('   <div class="DOP_WallGridGallery_ImageWrapper" id="DOP_WallGridGallery_ImageWrapper_'+UniqueID+'">');
                        ImageHTML.push('       <div class="DOP_WallGridGallery_ImageWindow"></div>');
                        ImageHTML.push('       <div class="DOP_WallGridGallery_ImageLoader"><img src="'+ImageLoader+'" alt="" /></div>');
                        ImageHTML.push('       <div class="DOP_WallGridGallery_ImageContainer">');
                        ImageHTML.push('           <div class="DOP_WallGridGallery_ImageBg"></div>');
                        ImageHTML.push('           <div class="DOP_WallGridGallery_Image"></div>');
                        ImageHTML.push('       </div>');
                        ImageHTML.push('   </div>');

                        if (NavigationPrevious == 'none'){
                            NavigationHTML.push('    <div class="DOP_WallGridGallery_LeftNav" id="DOP_WallGridGallery_LeftNav_'+UniqueID+'"></div>');
                        }
                        else{
                            NavigationHTML.push('    <div class="DOP_WallGridGallery_LeftNav" id="DOP_WallGridGallery_LeftNav_'+UniqueID+'"><img src="'+NavigationPrevious+'" alt="" /></div>');
                        }
                        if (NavigationNext == 'none'){
                            NavigationHTML.push('    <div class="DOP_WallGridGallery_RightNav" id="DOP_WallGridGallery_RightNav_'+UniqueID+'"></div>');
                        }
                        else{
                            NavigationHTML.push('    <div class="DOP_WallGridGallery_RightNav" id="DOP_WallGridGallery_RightNav_'+UniqueID+'"><img src="'+NavigationNext+'" alt="" /></div>');
                        }
                        if (NavigationBack == 'none'){
                            NavigationHTML.push('    <div class="DOP_WallGridGallery_BackNav" id="DOP_WallGridGallery_BackNav_'+UniqueID+'"></div>');
                        }
                        else{
                            NavigationHTML.push('    <div class="DOP_WallGridGallery_BackNav" id="DOP_WallGridGallery_BackNav_'+UniqueID+'"><img src="'+NavigationBack+'" alt="" /></div>');
                        }

                        HTML.push('<div class="DOP_WallGridGallery_Container">');
                        HTML.push('   <div class="DOP_WallGridGallery_Background"></div>');
                        HTML.push('   <div class="DOP_WallGridGallery_ThumbnailsWrapper">');
                        HTML.push('       <div class="DOP_WallGridGallery_Thumbnails"></div>');
                        HTML.push('   </div>');
                        if (TooltipEnabled == 'true'){
                            HTML.push('<div class="DOP_WallGridGallery_Tooltip"></div>');
                        }
                        if (ImagePosition != 'document'){
                            HTML.push(ImageHTML.join(""));
                            HTML.push(NavigationHTML.join(""));
                        }
                        HTML.push('</div>');

                        Container.html(HTML.join(""));
                        if (ImagePosition == 'document'){
                            $('body').append(ImageHTML.join(""));
                            $('body').append(NavigationHTML.join(""));
                        }
                        methods.initSettings();
                    },
                    initSettings:function(){// Init Settings
                        methods.initContainer();
                        methods.initBackground();
                        methods.initThumbnails();
                        if (TooltipEnabled == 'true'){
                            methods.initTooltip();
                        }
                        methods.initImage();
                        methods.initNavigation();
                    },
                    initRP:function(){// Init Resize & Positioning
                        methods.rpContainer();
                        methods.rpBackground();
                        methods.rpThumbnails();
                        methods.rpImage();
                    },

                    initContainer:function(){// Init Container
                        $('.DOP_WallGridGallery_Container', Container).css('display', 'block');
                        methods.rpContainer();
                    },
                    rpContainer:function(){// Resize & Position Container
                        if (Width != 'css'){
                            if (Width == '100%'){
                                $('.DOP_WallGridGallery_Container', Container).width(Container.width());
                            }
                            else{
                                $('.DOP_WallGridGallery_Container', Container).width(Width);
                            }
                        }
                        if (Height != 'css'){
                            if (Height == '100%'){
                                $('.DOP_WallGridGallery_Container', Container).height(Container.height());
                            }
                            else{
                                $('.DOP_WallGridGallery_Container', Container).height(Height);
                            }
                        }
                    },

                    initBackground:function(){// Init Background
                        if (BgColor != 'css'){
                            $('.DOP_WallGridGallery_Background', Container).css('background-color', '#'+BgColor);
                        }
                        $('.DOP_WallGridGallery_Background', Container).css('opacity', parseInt(BgAlpha)/100);

                        if (BgImage != 'none'){
                            var img = new Image();
                            $(img).load(function(){
                                BgImageLoaded = true;
                                $('.DOP_WallGridGallery_Background', Container).html(this);
                                BgImageWidth = $('img', '.DOP_WallGridGallery_Background', Container).width();
                                BgImageHeight = $('img', '.DOP_WallGridGallery_Background', Container).height();
                                methods.rpBackground();
                                $('img', '.DOP_WallGridGallery_Background', Container).css('opacity', 0);
                                $('img', '.DOP_WallGridGallery_Background', Container).stop(true, true).animate({'opacity':'1'}, 1000);
                            }).attr('src', BgImage);
                        }

                        methods.rpBackground();
                    },
                    rpBackground:function(){// Resize & Position Background
                        if (Width != 'css'){
                            if (Width == '100%'){
                                $('.DOP_WallGridGallery_Background', Container).width(Container.width());
                            }
                            else{
                                $('.DOP_WallGridGallery_Background', Container).width(Width);
                            }
                        }
                        if (Height != 'css'){
                            if (Height == '100%'){
                                $('.DOP_WallGridGallery_Background', Container).height(Container.height());
                            }
                            else{
                                $('.DOP_WallGridGallery_Background', Container).height(Height);
                            }
                        }
                        if (BgImage != 'none' && BgImageLoaded){
                            prototypes.resizeItem2($('.DOP_WallGridGallery_Background', Container), $('img', '.DOP_WallGridGallery_Background', Container), $('.DOP_WallGridGallery_Background', Container).width(), $('.DOP_WallGridGallery_Background', Container).height(), BgImageWidth, BgImageHeight, 'center');
                        }
                    },

                    initThumbnails:function(){//Init Thumbnails
                        var thumbnailWidth;

                        thumbnailWidth = ThumbnailWidth+ThumbnailPaddingRight+ThumbnailPaddingLeft+2*ThumbnailBorderSize;
                        if (NoColumns != 'resize'){
                            $('.DOP_WallGridGallery_Thumbnails', Container).width(ThumbnailsPaddingRight+ThumbnailsPaddingLeft+thumbnailWidth*NoColumns+(NoColumns-1)*ThumbnailsSpacing);
                        }

                        for (var i=1; i<=noImages; i++){
                            methods.loadThumb(i);
                        }

                        if (prototypes.isTouchDevice()){
                            prototypes.touchNavigation($('.DOP_WallGridGallery_ThumbnailsWrapper', Container), $('.DOP_WallGridGallery_Thumbnails', Container));
                        }
                        else if (ThumbnailsNavigation == 'mouse'){
                            $('.DOP_WallGridGallery_Thumbnails', Container).css('position', 'absolute');
                            methods.moveThumbnails();
                        }
                        methods.rpThumbnails();
                    },
                    loadThumb:function(no){// Load a thumbnail
                        methods.initThumb(no);
                        var img = new Image();

                        $(img).load(function(){
                            $('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no, Container).html(this);
                            methods.loadCompleteThumb(no);
                        }).attr('src', Thumbs[no-1]);
                    },
                    initThumb:function(no){// Init thumbnail before loading
                        var ThumbHTML = new Array();
                        ThumbHTML.push('<div class="DOP_WallGridGallery_ThumbContainer" id="DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no+'">');
                        ThumbHTML.push('   <div class="DOP_WallGridGallery_Thumb"></div>');

                        if (no % NoColumns != 0){
                            ThumbHTML.push('</div>');
                        }
                        else{
                            if (NoColumns != 'resize'){
                                ThumbHTML.push('</div><br style="clear:both;" />');
                            }
                            else{
                                ThumbHTML.push('</div>');
                            }
                        }

                        if (NoColumns == 'resize' && no == noImages){
                            ThumbHTML.push('<br style="clear:both;" />');
                        }

                        $('.DOP_WallGridGallery_Thumbnails', Container).append(ThumbHTML.join(""));

                        $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('opacity', parseInt(ThumbnailAlpha)/100);
                        $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).width(ThumbnailWidth+ThumbnailPaddingRight+ThumbnailPaddingLeft);
                        $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).height(ThumbnailHeight+ThumbnailPaddingTop+ThumbnailPaddingBottom);
                        $('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('margin-top', ThumbnailPaddingTop);
                        $('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('margin-left', ThumbnailPaddingLeft);
                        $('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('margin-bottom', ThumbnailPaddingBottom);
                        $('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('margin-right', ThumbnailPaddingRight);

                        $('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).width(ThumbnailWidth);
                        $('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).height(ThumbnailHeight);

                        if (NoColumns != 'resize'){
                            if (no > NoColumns){
                                $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('margin-top', ThumbnailsSpacing);
                            }
                            if (no%NoColumns != 1){
                                $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('margin-left', ThumbnailsSpacing);
                            }
                            if (no <= NoColumns){
                                $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('margin-top', ThumbnailsPaddingTop);
                            }
                            if (no%NoColumns == 0){
                                $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('margin-right', ThumbnailsPaddingRight);
                            }
                            if (no > NoColumns*(NoLines-1)){
                                $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('margin-bottom', ThumbnailsPaddingBottom);
                            }
                            if (no%NoColumns == 1){
                                $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('margin-left', ThumbnailsPaddingLeft);
                            }
                        }

                        $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('background-color', '#'+ThumbnailBgColor);
                        $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('border-width', ThumbnailBorderSize);
                        $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('border-color', '#'+ThumbnailBorderColor);

                        $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).addClass('DOP_WallGridGallery_ThumbLoader');
                        $('.DOP_WallGridGallery_ThumbLoader', Container).css('background-image', 'url('+ThumbnailLoader+')');
                    },
                    loadCompleteThumb:function(no){// Resize, Position & Edit a thumbnmail after loading
                        $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).removeClass('DOP_WallGridGallery_SmallLoader');
                        if ($('img', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).width() == 0){
                            prototypes.resizeItem2($('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no), $('img', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no), ThumbnailWidth, ThumbnailHeight, $('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).width(), $('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).height(), 'center');
                        }
                        else{
                            prototypes.resizeItem2($('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no), $('img', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no), ThumbnailWidth, ThumbnailHeight, $('img', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no, Container).width(), $('img', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).height(), 'center');
                        }
                        
                        $('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).css('opacity', 0);
                        $('.DOP_WallGridGallery_Thumb', '#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).stop(true, true).animate({'opacity':'1'}, 600);

                        $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no).hover(function(){
                            $(this).stop(true, true).animate({'opacity':parseInt(ThumbnailAlphaHover)/100}, 600);
                            $(this).css('background-color', '#'+ThumbnailBgColorHover);
                            $(this).css('border-color', '#'+ThumbnailBorderColorHover);
                            methods.showTooltip(no-1);
                        },
                        function(){
                            $(this).stop(true, true).animate({'opacity':parseInt(ThumbnailAlpha)/100}, 600);
                            $(this).css('background-color', '#'+ThumbnailBgColor);
                            $(this).css('border-color', '#'+ThumbnailBorderColor);
                            $('.DOP_WallGridGallery_Tooltip', Container).css('display', 'none');
                        });

                        $('#DOP_WallGridGallery_ThumbContainer_'+UniqueID+'_'+no, Container).click(function(){
                            if (Links[no-1] == ''){
                                methods.loadImage(no);
                            }
                            else{
                                prototypes.openLink(Links[no-1], LinksTarget[no-1]);
                            }
                        });
                    },
                    rpThumbnails:function(){// Resize & Position Thumbnails
                        if (NoColumns == 'resize'){
                            var thumbnailWidth = ThumbnailWidth+ThumbnailPaddingRight+ThumbnailPaddingLeft+2*ThumbnailBorderSize;
                            var eNoColumns = parseInt(($('.DOP_WallGridGallery_Thumbnails', Container).width()-ThumbnailsPaddingRight-ThumbnailsPaddingLeft+ThumbnailsSpacing)/(thumbnailWidth+ThumbnailsSpacing));
                            var eNoLines = parseInt(noImages/eNoColumns);
                            if (eNoLines*eNoColumns < noImages){
                                eNoLines++;
                            }

                            if ($('.DOP_WallGridGallery_Thumbnails', Container).width() != $('.DOP_WallGridGallery_Container', Container).width()){
                                $('.DOP_WallGridGallery_Thumbnails', Container).width($('.DOP_WallGridGallery_Container', Container).width());
                                thumbnailWidth = ThumbnailWidth+ThumbnailPaddingRight+ThumbnailPaddingLeft+2*ThumbnailBorderSize;
                                eNoColumns = parseInt(($('.DOP_WallGridGallery_Thumbnails', Container).width()-ThumbnailsPaddingRight-ThumbnailsPaddingLeft+ThumbnailsSpacing)/(thumbnailWidth+ThumbnailsSpacing));
                                eNoLines = parseInt(noImages/eNoColumns);
                                if (eNoLines*eNoColumns < noImages){
                                    eNoLines++;
                                }
                            }

                            for (var i=1; i<=this.noImages; i++){
                                $('#DOP_WallGridGallery_ThumbContainer_'+i, Container).css('margin-top', 0);
                                $('#DOP_WallGridGallery_ThumbContainer_'+i, Container).css('margin-right', 0);
                                $('#DOP_WallGridGallery_ThumbContainer_'+i, Container).css('margin-bottom', 0);
                                $('#DOP_WallGridGallery_ThumbContainer_'+i, Container).css('margin-left', 0);
                                if (i > eNoColumns){
                                    $('#DOP_WallGridGallery_ThumbContainer_'+i, Container).css('margin-top', ThumbnailsSpacing);
                                }
                                if (i%eNoColumns != 1){
                                    $('#DOP_WallGridGallery_ThumbContainer_'+i, Container).css('margin-left', ThumbnailsSpacing);
                                }
                                if (i <= eNoColumns){
                                    $('#DOP_WallGridGallery_ThumbContainer_'+i, Container).css('margin-top', ThumbnailsPaddingTop);
                                }
                                if (i%eNoColumns == 0){
                                    $('#DOP_WallGridGallery_ThumbContainer_'+i, Container).css('margin-right', ThumbnailsPaddingRight);
                                }
                                if (i > eNoColumns*(eNoLines-1)){
                                    $('#DOP_WallGridGallery_ThumbContainer_'+i, Container).css('margin-bottom', ThumbnailsPaddingBottom);
                                }
                                if (i%eNoColumns == 1){
                                    $('#DOP_WallGridGallery_ThumbContainer_'+i, Container).css('margin-left', ThumbnailsPaddingLeft);
                                }
                            }

                            if ($('.DOP_WallGridGallery_Thumbnails', Container).height() <= $('.DOP_WallGridGallery_Container', Container).height()){
                                $('.DOP_WallGridGallery_ThumbnailsWrapper', Container).height($('.DOP_WallGridGallery_Thumbnails', Container).height());
                            }
                            else{
                                $('.DOP_WallGridGallery_ThumbnailsWrapper', Container).height($('.DOP_WallGridGallery_Container', Container).height());
                            }
                        }

                        if ($('.DOP_WallGridGallery_Thumbnails', Container).width() <= $('.DOP_WallGridGallery_Container', Container).width()){
                            $('.DOP_WallGridGallery_ThumbnailsWrapper', Container).width($('.DOP_WallGridGallery_Thumbnails', Container).width());
                        }
                        else{
                            $('.DOP_WallGridGallery_ThumbnailsWrapper', Container).width($('.DOP_WallGridGallery_Container', Container).width());
                        }

                        if ($('.DOP_WallGridGallery_Thumbnails', Container).height() <= $('.DOP_WallGridGallery_Container', Container).height()){
                            $('.DOP_WallGridGallery_ThumbnailsWrapper', Container).height($('.DOP_WallGridGallery_Thumbnails', Container).height());
                        }
                        else{
                            $('.DOP_WallGridGallery_ThumbnailsWrapper', Container).height($('.DOP_WallGridGallery_Container', Container).height());
                        }

                        prototypes.centerItem($('.DOP_WallGridGallery_Container', Container), $('.DOP_WallGridGallery_ThumbnailsWrapper', Container), $('.DOP_WallGridGallery_Container', Container).width(), $('.DOP_WallGridGallery_Container', Container).height());

                        if (parseInt($('.DOP_WallGridGallery_Thumbnails', Container).css('margin-left')) < (-1)*($('.DOP_WallGridGallery_Thumbnails', Container).width()-$('.DOP_WallGridGallery_ThumbnailsWrapper', Container).width())){
                            $('.DOP_WallGridGallery_Thumbnails', Container).css('margin-left', (-1)*($('.DOP_WallGridGallery_Thumbnails', Container).width()-$('.DOP_WallGridGallery_ThumbnailsWrapper', Container).width()));
                        }
                        if (parseInt($('.DOP_WallGridGallery_Thumbnails', Container).css('margin-left')) > 0){
                            $('.DOP_WallGridGallery_Thumbnails', Container).css('margin-left', 0);
                        }
                        if (parseInt($('.DOP_WallGridGallery_Thumbnails', Container).css('margin-top')) < (-1)*($('.DOP_WallGridGallery_Thumbnails', Container).height()-$('.DOP_WallGridGallery_ThumbnailsWrapper', Container).height())){
                            $('.DOP_WallGridGallery_Thumbnails', Container).css('margin-top', (-1)*($('.DOP_WallGridGallery_Thumbnails', Container).height()-$('.DOP_WallGridGallery_ThumbnailsWrapper', Container).height()));
                        }
                        if (parseInt($('.DOP_WallGridGallery_Thumbnails', Container).css('margin-top')) > 0){
                            $('.DOP_WallGridGallery_Thumbnails', Container).css('margin-top', 0);
                        }

                        if (ThumbnailsNavigation == 'scroll'){
                            methods.initThumbnailsScroll();
                        }
                    },
                    moveThumbnails:function(){// Init thumbnails move
                        $('.DOP_WallGridGallery_ThumbnailsWrapper', Container).mousemove(function(e){
                            var thumbnailWidth, thumbnailHeight, mousePosition, thumbnailsPosition;

                            if ($('.DOP_WallGridGallery_Thumbnails', Container).width() > $('.DOP_WallGridGallery_ThumbnailsWrapper', Container).width()){
                                thumbnailWidth = ThumbnailWidth+ThumbnailPaddingRight+ThumbnailPaddingLeft+2*ThumbnailBorderSize;
                                mousePosition = e.clientX-$(this).offset().left+parseInt($(this).css('margin-left'))+$(document).scrollLeft();
                                thumbnailsPosition = 0-(mousePosition-thumbnailWidth)*($('.DOP_WallGridGallery_Thumbnails', Container).width()-$('.DOP_WallGridGallery_ThumbnailsWrapper', Container).width())/($('.DOP_WallGridGallery_ThumbnailsWrapper', Container).width()-2*thumbnailWidth);
                                if (thumbnailsPosition < (-1)*($('.DOP_WallGridGallery_Thumbnails', Container).width()-$('.DOP_WallGridGallery_ThumbnailsWrapper', Container).width())){
                                    thumbnailsPosition = (-1)*($('.DOP_WallGridGallery_Thumbnails', Container).width()-$('.DOP_WallGridGallery_ThumbnailsWrapper', Container).width());
                                }
                                if (thumbnailsPosition > 0){
                                    thumbnailsPosition = 0;
                                }
                                $('.DOP_WallGridGallery_Thumbnails', Container).css('margin-left', thumbnailsPosition);
                            }

                            if ($('.DOP_WallGridGallery_Thumbnails', Container).height() > $('.DOP_WallGridGallery_ThumbnailsWrapper', Container).height()){
                                thumbnailHeight = ThumbnailHeight+ThumbnailPaddingTop+ThumbnailPaddingBottom+2*ThumbnailBorderSize;
                                mousePosition = e.clientY-$(this).offset().top+parseInt($(this).css('margin-top'))+$(document).scrollTop();
                                thumbnailsPosition = 0-(mousePosition-thumbnailHeight)*($('.DOP_WallGridGallery_Thumbnails', Container).height()-$('.DOP_WallGridGallery_ThumbnailsWrapper', Container).height())/($('.DOP_WallGridGallery_ThumbnailsWrapper', Container).height()-2*thumbnailHeight);
                                if (thumbnailsPosition < (-1)*($('.DOP_WallGridGallery_Thumbnails', Container).height()-$('.DOP_WallGridGallery_ThumbnailsWrapper', Container).height())){
                                    thumbnailsPosition = (-1)*($('.DOP_WallGridGallery_Thumbnails', Container).height()-$('.DOP_WallGridGallery_ThumbnailsWrapper', Container).height());
                                }
                                if (thumbnailsPosition > 0){
                                    thumbnailsPosition = 0;
                                }
                                $('.DOP_WallGridGallery_Thumbnails', Container).css('margin-top', thumbnailsPosition);
                            }
                        });
                    },
                    initThumbnailsScroll:function(){//Init Thumbnails Scroll
                        $('.jspContainer', '.DOP_WallGridGallery_ThumbnailsWrapper', Container).width($('.DOP_WallGridGallery_ThumbnailsWrapper', Container).width());
                        $('.jspPane', '.DOP_WallGridGallery_ThumbnailsWrapper', Container).width($('.DOP_WallGridGallery_ThumbnailsWrapper', Container).width());

                        $('.DOP_WallGridGallery_ThumbnailsWrapper', Container).jScrollPane();

                        if (this.ThumbnailsScrollScrubColor != 'css'){
                            $('.jspDrag', '.DOP_WallGridGallery_ThumbnailsWrapper', Container).css('background', '#'+ThumbnailsScrollScrubColor);
                        }
                        if (this.ThumbnailsScrollBarColor != 'css'){
                            $('.jspTrack', '.DOP_WallGridGallery_ThumbnailsWrapper', Container).css('background', '#'+ThumbnailsScrollBarColor);
                        }
                    },

                    initTooltip:function(){// Init Tooltip
                        $('.DOP_WallGridGallery_ThumbnailsWrapper', Container).mousemove(function(e){
                            var mousePositionX = e.clientX-$(this).offset().left+parseInt($(this).css('margin-left'))+$(document).scrollLeft();
                            var mousePositionY = e.clientY-$(this).offset().top+parseInt($(this).css('margin-top'))+$(document).scrollTop();

                            $('.DOP_WallGridGallery_Tooltip', Container).css('margin-left', mousePositionX-10);
                            $('.DOP_WallGridGallery_Tooltip', Container).css('margin-top', mousePositionY-$('.DOP_WallGridGallery_Tooltip', Container).height()-15);
                        });
                    },
                    showTooltip:function(no){// Resize, Position & Display the Tooltip
                        var HTML = new Array();
                        HTML.push(Description[no]);
                        HTML.push('<div class="DOP_WallGridGallery_Tooltip_ArrowBorder"></div>');
                        HTML.push('<div class="DOP_WallGridGallery_Tooltip_Arrow"></div>');
                        $('.DOP_WallGridGallery_Tooltip', Container).html(HTML.join(""));

                        if (TooltipBgColor != 'css'){
                            $('.DOP_WallGridGallery_Tooltip', Container).css('background-color', '#'+TooltipBgColor);
                            $('.DOP_WallGridGallery_Tooltip_Arrow', Container).css('border-top-color', '#'+TooltipBgColor);
                        }
                        if (TooltipStrokeColor != 'css'){
                            $('.DOP_WallGridGallery_Tooltip', Container).css('border-color', '#'+TooltipStrokeColor);
                            $('.DOP_WallGridGallery_Tooltip_ArrowBorder', Container).css('border-top-color', '#'+TooltipStrokeColor);
                        }
                        if (TooltipTextColor != 'css'){
                            $('.DOP_WallGridGallery_Tooltip', Container).css('color', '#'+TooltipTextColor);
                        }
                        if (Description[no] != ''){
                            $('.DOP_WallGridGallery_Tooltip', Container).css('display', 'block');
                        }
                    },

                    initImage:function(){// Init Image
                        $('.DOP_WallGridGallery_Image', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('margin-top', ImagePaddingTop);
                        $('.DOP_WallGridGallery_Image', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('margin-left', ImagePaddingLeft);

                        if (ImageWindowColor != 'css'){
                            $('.DOP_WallGridGallery_ImageWindow', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('background-color', '#'+ImageWindowColor);
                        }
                        $('.DOP_WallGridGallery_ImageWindow', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('opacity', parseInt(ImageWindowAlpha)/100);

                        if (ImageBgColor != 'css'){
                            $('.DOP_WallGridGallery_ImageBg', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('background-color', '#'+ImageBgColor);
                        }
                        $('.DOP_WallGridGallery_ImageBg', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('opacity', parseInt(ImageBgAlpha)/100);

                        methods.rpImage();
                    },
                    loadImage:function(no){// Init Image Load
                        imageLoaded = false;

                        if (currentImage == 0){
                            currentImage = no;
                            $('.DOP_WallGridGallery_Image', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).html('');
                            $('.DOP_WallGridGallery_ImageContainer', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('opacity', 0);
                            $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('display', 'block');
                            $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).stop(true, true).animate({'opacity':'1'}, 600, function(){
                                methods.startLoadImage(no);
                            });
                        }
                        else if (currentImage > no){
                            currentImage = no;
                            $('.DOP_WallGridGallery_ImageContainer', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).stop(true, true).animate({'margin-left':$('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width(), 'opacity':'0'}, 600, function(){
                                methods.startLoadImage(no);
                            });
                        }
                        else{
                            currentImage = no;
                            $('.DOP_WallGridGallery_ImageContainer', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).stop(true, true).animate({'margin-left':0-$('.DOP_WallGridGallery_ImageContainer', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width(), 'opacity':'0'}, 600, function(){
                                methods.startLoadImage(no);
                            });
                        }
                    },
                    startLoadImage:function(no){// Load Image
                        $('.DOP_WallGridGallery_ImageLoader', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('display', 'block');
                        methods.rpImage();
                        var img = new Image();
                        $(img).load(function(){
                            imageLoaded = true;
                            $('.DOP_WallGridGallery_ImageLoader', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('display', 'none');
                            $('.DOP_WallGridGallery_Image', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).html(this);
                            ImageWidth = $(this).width();
                            ImageHeight = $(this).height();
                            methods.rpImage();
                            $('.DOP_WallGridGallery_ImageContainer', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).stop(true, true).animate({'opacity':'1'}, 1000);
                        }).attr('src', Images[no-1]);
                    },
                    rpImage:function(){// Resize & Position Image
                        if (ImagePosition == 'document'){
                            if (prototypes.isIE8Browser()){
                                $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width($(document).width()-1);
                                $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height($(document).height()-1);
                            }
                            else{
                                $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width($(document).width());
                                $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height($(document).height());
                            }
                        }
                        else{
                            $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width($('.DOP_WallGridGallery_Container', Container).width());
                            $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height($('.DOP_WallGridGallery_Container', Container).height());
                        }

                        $('.DOP_WallGridGallery_ImageWindow', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width($('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width());
                        $('.DOP_WallGridGallery_ImageWindow', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height($('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height());

                        if (ImagePosition == 'document'){
                            $('.DOP_WallGridGallery_ImageLoader', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('margin-left', $(document).scrollLeft()+($(window).width()-$('.DOP_WallGridGallery_ImageLoader', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width())/2);
                            $('.DOP_WallGridGallery_ImageLoader', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('margin-top', $(document).scrollTop()+($(window).height()-$('.DOP_WallGridGallery_ImageLoader', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height())/2);
                        }
                        else{
                            prototypes.centerItem($('#DOP_WallGridGallery_ImageWrapper_'+UniqueID), $('.DOP_WallGridGallery_ImageLoader', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID), $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width(), $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height());
                        }

                        if (imageLoaded){
                            var cw = 0,
                            ch = 0,
                            defaultW = ImageWidth,
                            defaultH = ImageHeight,
                            currW = 0,
                            currH = 0;

                            if (ImagePosition == 'document'){
                                cw = $(window).width()-ImageMarginLeft-ImageMarginRight-ImagePaddingLeft-ImagePaddingRight;
                                ch = $(window).height()-ImageMarginTop-ImageMarginBottom-ImagePaddingTop-ImagePaddingBottom;
                            }
                            else{
                                cw = $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width()-ImageMarginLeft-ImageMarginRight-ImagePaddingLeft-ImagePaddingRight;
                                ch = $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height()-ImageMarginTop-ImageMarginBottom-ImagePaddingTop-ImagePaddingBottom;
                            }

                            if (defaultW <= cw && defaultH <= ch){
                                currW = defaultW;
                                currH = defaultH;
                            }
                            else{
                                currH = ch;
                                currW = (defaultW*ch)/defaultH;
                                if (currW > cw){
                                    currW = cw;
                                    currH = (defaultH*cw)/defaultW;
                                }
                            }

                            $('.DOP_WallGridGallery_Image', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width(currW);
                            $('.DOP_WallGridGallery_Image', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height(currH);
                            $('.DOP_WallGridGallery_Image img', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width(currW);
                            $('.DOP_WallGridGallery_Image img', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height(currH);
                            $('.DOP_WallGridGallery_ImageBg', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width(currW+ImagePaddingLeft+ImagePaddingRight);
                            $('.DOP_WallGridGallery_ImageBg', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height(currH+ImagePaddingTop+ImagePaddingBottom);
                            $('.DOP_WallGridGallery_ImageContainer', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width($('.DOP_WallGridGallery_ImageBg', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width());
                            $('.DOP_WallGridGallery_ImageContainer', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height($('.DOP_WallGridGallery_ImageBg', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height());

                            if (ImagePosition == 'document'){
                                $('.DOP_WallGridGallery_ImageContainer', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('margin-left', $(document).scrollLeft()+($(window).width()-$('.DOP_WallGridGallery_ImageContainer', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width())/2);
                                $('.DOP_WallGridGallery_ImageContainer', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).css('margin-top', $(document).scrollTop()+($(window).height()-$('.DOP_WallGridGallery_ImageContainer', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height())/2);
                            }
                            else{
                                prototypes.centerItem($('#DOP_WallGridGallery_ImageWrapper_'+UniqueID), $('.DOP_WallGridGallery_ImageContainer', '#DOP_WallGridGallery_ImageWrapper_'+UniqueID), $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).width(), $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).height());
                            }
                        }
                    },

                    initNavigation:function(){// Init Navigation
                        if (!prototypes.isTouchDevice()){
                            $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).mousemove(function(e){
                                var mousePositionX =  e.clientX-$(this).offset().left+parseInt($(this).css('margin-left'))+$(document).scrollLeft();
                                var mousePositionY = e.clientY-$(this).offset().top+parseInt($(this).css('margin-top'))+$(document).scrollTop();

                                if (ImagePosition != 'document'){
                                    $('#DOP_WallGridGallery_LeftNav_'+UniqueID).css('margin-left', mousePositionX+10);
                                    $('#DOP_WallGridGallery_LeftNav_'+UniqueID).css('margin-top', mousePositionY-$('#DOP_WallGridGallery_LeftNav_'+UniqueID).height()/2);

                                    $('#DOP_WallGridGallery_RightNav_'+UniqueID).css('margin-left', mousePositionX-10-$('#DOP_WallGridGallery_RightNav_'+UniqueID).width());
                                    $('#DOP_WallGridGallery_RightNav_'+UniqueID).css('margin-top', mousePositionY-$('#DOP_WallGridGallery_RightNav_'+UniqueID).height()/2);

                                    $('#DOP_WallGridGallery_BackNav_'+UniqueID).css('margin-left', mousePositionX-$('#DOP_WallGridGallery_BackNav_'+UniqueID).width()/2);
                                    $('#DOP_WallGridGallery_BackNav_'+UniqueID).css('margin-top', mousePositionY+25);
                                }
                                else{
                                    $('#DOP_WallGridGallery_LeftNav_'+UniqueID).css('left', mousePositionX+10);
                                    $('#DOP_WallGridGallery_LeftNav_'+UniqueID).css('top', mousePositionY-$('#DOP_WallGridGallery_LeftNav_'+UniqueID).height()/2);

                                    $('#DOP_WallGridGallery_RightNav_'+UniqueID).css('left', +mousePositionX-10-$('#DOP_WallGridGallery_RightNav_'+UniqueID).width());
                                    $('#DOP_WallGridGallery_RightNav_'+UniqueID).css('top', mousePositionY-$('#DOP_WallGridGallery_RightNav_'+UniqueID).height()/2);

                                    $('#DOP_WallGridGallery_BackNav_'+UniqueID).css('left', mousePositionX-$('#DOP_WallGridGallery_BackNav_'+UniqueID).width()/2);
                                    $('#DOP_WallGridGallery_BackNav_'+UniqueID).css('top', mousePositionY+25);
                                }

                                $('#DOP_WallGridGallery_LeftNav_'+UniqueID).css('display', 'none');
                                $('#DOP_WallGridGallery_RightNav_'+UniqueID).css('display', 'none');
                                $('#DOP_WallGridGallery_BackNav_'+UniqueID).css('display', 'none');

                                if (ImagePosition != 'document'){
                                    if (mousePositionX < $(this).width()/3){
                                        $('#DOP_WallGridGallery_LeftNav_'+UniqueID).css('display', 'block');
                                    }
                                    else if (mousePositionX > $(this).width()*2/3){
                                        $('#DOP_WallGridGallery_RightNav_'+UniqueID).css('display', 'block');
                                    }
                                    else{
                                        $('#DOP_WallGridGallery_BackNav_'+UniqueID).css('display', 'block');
                                    }
                                }
                                else{
                                    if (mousePositionX-$(document).scrollLeft() < $(window).width()/3){
                                        $('#DOP_WallGridGallery_LeftNav_'+UniqueID).css('display', 'block');
                                    }
                                    else if (mousePositionX-$(document).scrollLeft() > $(window).width()*2/3){
                                        $('#DOP_WallGridGallery_RightNav_'+UniqueID).css('display', 'block');
                                    }
                                    else{
                                        $('#DOP_WallGridGallery_BackNav_'+UniqueID).css('display', 'block');
                                    }
                                }
                            });
                        }
                        
                        $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).click(function(e){
                            var mousePositionX =  e.clientX-$(this).offset().left+parseInt($(this).css('margin-left'))+$(document).scrollLeft();
                            if (imageLoaded){
                                if (ImagePosition != 'document'){
                                    if (mousePositionX < $(this).width()/3) methods.previousImage();
                                    else if (mousePositionX > $(this).width()*2/3) methods.nextImage();
                                    else methods.backToGrid();
                                }
                                else{
                                    if (mousePositionX-$(document).scrollLeft() < $(window).width()/3) methods.previousImage();
                                    else if (mousePositionX-$(document).scrollLeft() > $(window).width()*2/3) methods.nextImage();
                                    else methods.backToGrid();
                                }
                            }
                        });
                    },
                    nextImage:function(){// Jump to next image
                        if (currentImage == noImages){
                            methods.loadImage(1);
                        }
                        else{
                            methods.loadImage(currentImage+1);
                        }
                    },
                    previousImage:function(){// Jump to previous image
                        if (currentImage == 1){
                            methods.loadImage(noImages);
                        }
                        else{
                            methods.loadImage(currentImage-1);
                        }
                    },
                    backToGrid:function(){// Back to thumbnails(grid)
                        imageLoaded = false;
                        currentImage = 0;

                        $('#DOP_WallGridGallery_ImageWrapper_'+UniqueID).stop(true, true).animate({'opacity':'0'}, 300, function(){
                            $(this).css('display', 'none');
                            $('#DOP_WallGridGallery_LeftNav_'+UniqueID).css('display', 'none');
                            $('#DOP_WallGridGallery_RightNav_'+UniqueID).css('display', 'none');
                            $('#DOP_WallGridGallery_BackNav_'+UniqueID).css('display', 'none');
                        });
                    }
                  },

        prototypes = {
                        resizeItem:function(parent, child, cw, ch, dw, dh, pos){// Resize & Position an Item (the item is 100% visible)
                            var currW = 0, currH = 0;

                            if (dw <= cw && dh <= ch){
                                currW = dw;
                                currH = dh;
                            }
                            else{
                                currH = ch;
                                currW = (dw*ch)/dh;

                                if (currW > cw){
                                    currW = cw;
                                    currH = (dh*cw)/dw;
                                }
                            }

                            child.width(currW);
                            child.height(currH);
                            switch(pos.toLowerCase()){
                                case 'top':
                                    prototypes.topItem(parent, child, ch);
                                    break;
                                case 'bottom':
                                    prototypes.bottomItem(parent, child, ch);
                                    break;
                                case 'left':
                                    prototypes.leftItem(parent, child, cw);
                                    break;
                                case 'right':
                                    prototypes.rightItem(parent, child, cw);
                                    break;
                                case 'horizontal-center':
                                    prototypes.hCenterItem(parent, child, cw);
                                    break;
                                case 'vertical-center':
                                    prototypes.vCenterItem(parent, child, ch);
                                    break;
                                case 'center':
                                    prototypes.centerItem(parent, child, cw, ch);
                                    break;
                                case 'top-left':
                                    prototypes.tlItem(parent, child, cw, ch);
                                    break;
                                case 'top-center':
                                    prototypes.tcItem(parent, child, cw, ch);
                                    break;
                                case 'top-right':
                                    prototypes.trItem(parent, child, cw, ch);
                                    break;
                                case 'middle-left':
                                    prototypes.mlItem(parent, child, cw, ch);
                                    break;
                                case 'middle-right':
                                    prototypes.mrItem(parent, child, cw, ch);
                                    break;
                                case 'bottom-left':
                                    prototypes.blItem(parent, child, cw, ch);
                                    break;
                                case 'bottom-center':
                                    prototypes.bcItem(parent, child, cw, ch);
                                    break;
                                case 'bottom-right':
                                    prototypes.brItem(parent, child, cw, ch);
                                    break;
                            }
                        },
                        resizeItem2:function(parent, child, cw, ch, dw, dh, pos){// Resize & Position an Item (the item covers all the container)
                            var currW = 0, currH = 0;

                            currH = ch;
                            currW = (dw*ch)/dh;

                            if (currW < cw){
                                currW = cw;
                                currH = (dh*cw)/dw;
                            }

                            child.width(currW);
                            child.height(currH);

                            switch(pos.toLowerCase()){
                                case 'top':
                                    prototypes.topItem(parent, child, ch);
                                    break;
                                case 'bottom':
                                    prototypes.bottomItem(parent, child, ch);
                                    break;
                                case 'left':
                                    prototypes.leftItem(parent, child, cw);
                                    break;
                                case 'right':
                                    prototypes.rightItem(parent, child, cw);
                                    break;
                                case 'horizontal-center':
                                    prototypes.hCenterItem(parent, child, cw);
                                    break;
                                case 'vertical-center':
                                    prototypes.vCenterItem(parent, child, ch);
                                    break;
                                case 'center':
                                    prototypes.centerItem(parent, child, cw, ch);
                                    break;
                                case 'top-left':
                                    prototypes.tlItem(parent, child, cw, ch);
                                    break;
                                case 'top-center':
                                    prototypes.tcItem(parent, child, cw, ch);
                                    break;
                                case 'top-right':
                                    prototypes.trItem(parent, child, cw, ch);
                                    break;
                                case 'middle-left':
                                    prototypes.mlItem(parent, child, cw, ch);
                                    break;
                                case 'middle-right':
                                    prototypes.mrItem(parent, child, cw, ch);
                                    break;
                                case 'bottom-left':
                                    prototypes.blItem(parent, child, cw, ch);
                                    break;
                                case 'bottom-center':
                                    prototypes.bcItem(parent, child, cw, ch);
                                    break;
                                case 'bottom-right':
                                    prototypes.brItem(parent, child, cw, ch);
                                    break;
                            }
                        },

                        topItem:function(parent, child, ch){// Position Item on Top
                            parent.height(ch);
                            child.css('margin-top', 0);
                        },
                        bottomItem:function(parent, child, ch){// Position Item on Bottom
                            parent.height(ch);
                            child.css('margin-top', ch-child.height());
                        },
                        leftItem:function(parent, child, cw){// Position Item on Left
                            parent.width(cw);
                            child.css('margin-left', 0);
                        },
                        rightItem:function(parent, child, cw){// Position Item on Right
                            parent.width(cw);
                            child.css('margin-left', parent.width()-child.width());
                        },
                        hCenterItem:function(parent, child, cw){// Position Item on Horizontal Center
                            parent.width(cw);
                            child.css('margin-left', (cw-child.width())/2);
                        },
                        vCenterItem:function(parent, child, ch){// Position Item on Vertical Center
                            parent.height(ch);
                            child.css('margin-top', (ch-child.height())/2);
                        },
                        centerItem:function(parent, child, cw, ch){// Position Item on Center
                            prototypes.hCenterItem(parent, child, cw);
                            prototypes.vCenterItem(parent, child, ch);
                        },
                        tlItem:function(parent, child, cw, ch){// Position Item on Top-Left
                            prototypes.topItem(parent, child, ch);
                            prototypes.leftItem(parent, child, cw);
                        },
                        tcItem:function(parent, child, cw, ch){// Position Item on Top-Center
                            prototypes.topItem(parent, child, ch);
                            prototypes.hCenterItem(parent, child, cw);
                        },
                        trItem:function(parent, child, cw, ch){// Position Item on Top-Right
                            prototypes.topItem(parent, child, ch);
                            prototypes.rightItem(parent, child, cw);
                        },
                        mlItem:function(parent, child, cw, ch){// Position Item on Middle-Left
                            prototypes.vCenterItem(parent, child, ch);
                            prototypes.leftItem(parent, child, cw);
                        },
                        mrItem:function(parent, child, cw, ch){// Position Item on Middle-Right
                            prototypes.vCenterItem(parent, child, ch);
                            prototypes.rightItem(parent, child, cw);
                        },
                        blItem:function(parent, child, cw, ch){// Position Item on Bottom-Left
                            prototypes.bottomItem(parent, child, ch);
                            prototypes.leftItem(parent, child, cw);
                        },
                        bcItem:function(parent, child, cw, ch){// Position Item on Bottom-Center
                            prototypes.bottomItem(parent, child, ch);
                            prototypes.hCenterItem(parent, child, cw);
                        },
                        brItem:function(parent, child, cw, ch){// Position Item on Bottom-Right
                            prototypes.bottomItem(parent, child, ch);
                            prototypes.rightItem(parent, child, cw);
                        },

                        longMonth:function(month){// Return month with 0 in front if smaller then 10.
                            if (month < 10){
                                return '0'+month;
                            }
                            else{
                                return month;
                            }

                        },
                        longDay:function(day){// Return day with 0 in front if smaller then 10.
                            if (day < 10){
                                return '0'+day;
                            }
                            else{
                                return day;
                            }
                        },

                        randomize:function(theArray){// Randomize the items of an array
                            theArray.sort(function(){
                                return 0.5-Math.random();
                            });
                            return theArray;
                        },
                        randomString:function(string_length){// Create a string with random elements
                            var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz",
                            random_string = '';

                            for (var i=0; i<string_length; i++){
                                var rnum = Math.floor(Math.random()*chars.length);
                                random_string += chars.substring(rnum,rnum+1);
                            }
                            return random_string;
                        },

                        isIE8Browser:function(){// Detect the browser IE8
                            var isIE8 = false,
                            agent = navigator.userAgent.toLowerCase();

                            if (agent.indexOf('msie 8') != -1){
                                isIE8 = true;
                            }
                            return isIE8;
                        },
                        isTouchDevice:function(){// Detect Touchscreen devices
                            var isTouch = false,
                            agent = navigator.userAgent.toLowerCase();

                            if (agent.indexOf('android') != -1){
                                isTouch = true;
                            }
                            if (agent.indexOf('blackberry') != -1){
                                isTouch = true;
                            }
                            if (agent.indexOf('ipad') != -1){
                                isTouch = true;
                            }
                            if (agent.indexOf('iphone') != -1){
                                isTouch = true;
                            }
                            if (agent.indexOf('ipod') != -1){
                                isTouch = true;
                            }
                            if (agent.indexOf('palm') != -1){
                                isTouch = true;
                            }
                            if (agent.indexOf('series60') != -1){
                                isTouch = true;
                            }
                            if (agent.indexOf('symbian') != -1){
                                isTouch = true;
                            }
                            if (agent.indexOf('windows ce') != -1){
                                isTouch = true;
                            }

                            return isTouch;
                        },
                        touchNavigation:function(parent, child){// One finger Navigation for touchscreen devices
                            var prevX, prevY, currX, currY, touch;
                            
                            parent.bind('touchstart', function(e){
                                touch = e.originalEvent.touches[0];
                                prevX = touch.clientX;
                                prevY = touch.clientY;
                            });

                            parent.bind('touchmove', function(e){
                                e.preventDefault();

                                var touch = e.originalEvent.touches[0],
                                currX = touch.clientX,
                                currY = touch.clientY,
                                thumbnailsPositionX = currX>prevX ? parseInt(child.css('margin-left'))+(currX-prevX):parseInt(child.css('margin-left'))-(prevX-currX),
                                thumbnailsPositionY = currY>prevY ? parseInt(child.css('margin-top'))+(currY-prevY):parseInt(child.css('margin-top'))-(prevY-currY);

                                if (thumbnailsPositionX < (-1)*(child.width()-parent.width())){
                                    thumbnailsPositionX = (-1)*(child.width()-parent.width());
                                }
                                else if (thumbnailsPositionX > 0){
                                    thumbnailsPositionX = 0;
                                }
                                if (thumbnailsPositionY < (-1)*(child.height()-parent.height())){
                                    thumbnailsPositionY = (-1)*(child.height()-parent.height());
                                }
                                else if (thumbnailsPositionY > 0){
                                    thumbnailsPositionY = 0;
                                }

                                prevX = currX;
                                prevY = currY;

                                child.css('margin-left', thumbnailsPositionX);
                                child.css('margin-top', thumbnailsPositionY);
                            });

                            parent.bind('touchend', function(e){
                                e.preventDefault();
                            });
                        },

                        openLink:function(url, target){// Open a link.
                            if (target.toLowerCase() == '_blank'){
                                window.open(url);
                            }
                            else{
                                window.location = url;
                            }
                        }
                     };

        return methods.init.apply(this);
    }
})(jQuery);
