(function($) {
    /**
     * Created by joepvanhunsel on 01-04-14.
     */

    $.viewer = function(element, options) {

        var defaults = {
            speed : 1000
        };

        // Reference to this
        var t = this;

        // Create settings object
        t.settings = {};

        // jQuery reference to element
        //var $element = $(element);

        // Lists
        t.$currentLi = null;

        // Constructor
        var init = function ()
        {
            // Extend the defaults with options, save in settings
            t.settings = $.extend({}, defaults, options);
        };

        t.goTo = function(value, direction)
        {
            if (direction == 'left'){
                value--;
                if (value == -1){
                    value = items.length-1;
                }
            }else{
                value++;
                if (value == items.length){
                    value = 0;
                }
            }

            $('.foto_select').val(value+1);
            if ($('#cards').size()){
                $('.customSelectInner').html('Kaartje ' + (value+1));
            }else if ($('#photography').size())
            {
                $('.customSelectInner').html('Foto ' + (value+1));
            }

            //get width of viewer
            var vlW = $('#viewer').width();

            // Get new list item
            var $newLi = build(value);

            //check wich side the new image must come
            if (direction == 'left')
            {
                // Place list item left
                $newLi.css({
                    'left' : '-'+vlW+'px'
                });
            }else
            {
                // Place list item right
                $newLi.css({
                    'left' : vlW+'px'
                });
            }

            // Append item to list
            $viewerList.append($newLi);

            $newLi.hide();

            //check to slide images in right direction
            if (direction == 'left' || direction == 'right')
            {
                animation(direction, $newLi);
            }
            else
            {
                $newLi.find('img').eq(0).load(function()
                {
                    var $img = $('.viewer_list').children('li');
                    $('.loader').fadeOut();
                    $newLi.fadeIn();
                    t.resizeViewer();

                    if (($newLi.height()*2+20) > $viewer.height())
                    {
                        var imgLeft = ($viewer.width() - $img.eq(0).find("img").width())/2;
                        $img.eq(0).css({
                            'left': '+='+imgLeft
                        });
                    }else
                    {
                        var imgTop = (($viewer.height() - $img.eq(0).find("img").height()*2))/2;
                        $img.eq(0).css({
                            'marginTop': '+='+imgTop
                        });
                    }

                    $newLi.animate({
                        'left' : '-='+vlW+'px'
                    },500);
                    t.$currentLi = $newLi;
                    $arrowLeft.css({
                        opacity: 0.5
                    });
                    $arrowRight.css({
                        opacity: 0.5
                    });
                    $('#fotoDropdown').css({
                        opacity: 1
                    })
                });
            }
        }

        var animation = function(direction, $newLi)
        {
            //get width of viewer
            var vlW = $('#viewer').width();

            $newLi.find('img').eq(0).load(function()
            {
                $('.loader').fadeOut();
                /*if ($arrowRight.){
                    $arrowRight.css({
                        opacity: 0.5
                    });

                    $arrowLeft.css({
                        opacity: 0.5
                    });

                }*/

                $newLi.fadeIn();

                t.resizeViewer(true);
                resizebg()


                var calc = '';
                // Animate
                if (direction == 'left')
                {
                    calc = '+=';
                }else if (direction == 'right')
                {
                    calc = '-=';
                }
                $newLi.animate({
                    'left' : calc+vlW+'px'
                },500);
                t.$currentLi.animate({
                    'left' : calc+vlW+'px'
                },500, function(){
                    t.$currentLi.remove();
                    t.$currentLi = $newLi;
                    disable=false;
                });

            });
        };

        var build = function(value)
        {
            var data='';
            var $li = $('<li/>');

            if(items[value]['position'])
            {
                if (items[value]['position']==1)
                {
                    data += "<img src='/public/uploads/" + items[value]['images'][0]['filename'] + "' class='horizontal'/> ";
                    if (items[value]['images'][1]){
                        data += "<img src='/public/uploads/" + items[value]['images'][1]['filename'] + "' class='horizontal' /> ";
                        data += "<div class='clear'></div>";
                    }
                }else
                {
                    data += "<img src='/public/uploads/" + items[value]['images'][0]['filename'] + "' class='vertical' />";
                    if (items[value]['images'][1]){
                        data += "<img src='/public/uploads/" + items[value]['images'][1]['filename'] + "' />";
                    }
                }

            }else
            {
                data = "<img src='/public/uploads/" + items[value]['images'][0]['filename'] + "' class='single' />";
            }
            $li.html(data);

            return $li;
        };

        t.resizeViewer = function(newImg)
        {
            var $img = $('.viewer_list').children('li');
            var viewerLeft = $viewer.offset().left;

            var vRatio = $viewer.width() / $viewer.height();

            //check height to set viewer size
            var vh = $(window).height()-210;
            var vw = vh*vRatio;

            if (vw > ($(window).width()-viewerLeft-70))
            {
                vw = $(window).width()- viewerLeft-70;
                vh = vw/vRatio;
            }

            $('.loader').css({
               'marginTop' : vh/2,
               'left': vw/2
            });

            if (vh < 480)
            {
                vh = 480;
                vw = vh*vRatio;
            }

            $viewer.css({
                'height': vh,
                'width': vw
            });

            var vih;
            var viw;
            var viRatio;

            var eq;
            if (newImg == true)
            {
                eq=1;
            }else
            {
                eq=0;
            }
            vih = $img.eq(eq).find("img").height();
            viw = $img.eq(eq).find("img").width();
            viRatio = viw/vih;
            vih = vw/viRatio;

            var horizontal = $img.eq(eq).children('img').hasClass('horizontal');

            if(horizontal)
            {
                var liW = $img.eq(eq).find('img').width() * 2 + 40;
                $img.eq(eq).width(liW);

                if ($img.eq(eq).find("img").eq(1).offset())
                {
                    if ((viw*2+40) > vw)
                    {
                        $img.eq(eq).find("img").css({
                            'height': (vw/2-22)*viRatio,
                            'width':  vw/2-10
                        });
                    }else
                    {
                        $img.eq(eq).find("img").css({
                            'height': vh,
                            'width':  vh*viRatio

                        });
                    }

                    if (newImg == true)
                    {
                        if (viw*2 > vw)
                        {
                            var imgTop = ($viewer.height() - $img.eq(1).find("img").height())/2;
                            $img.eq(1).css({
                                'marginTop': '+='+imgTop
                            });
                        }else
                        {
                            var imgLeft = ($viewer.width() - $img.eq(1).find("img").width() - 150)/2;
                            $img.eq(1).css({
                                'left': '+='+imgLeft
                            });
                        }
                    }

                }else
                {
                    if (vih > vh)
                    {
                        $img.eq(eq).find("img").css({
                            'height': vh,
                            'width':  vh*viRatio
                        });
                    }else
                    {
                        $img.eq(eq).find("img").css({
                            'width':  vw,
                            'height': vw/viRatio
                        });
                    }
                    if (newImg == true)
                    {
                        if (vih > vh)
                        {
                            var imgLeft = ($viewer.width() - $img.eq(1).find("img").width())/2;
                            $img.eq(1).css({
                                'left': '+='+imgLeft
                            });
                        }else
                        {
                            var imgTop = ($viewer.height() - $img.eq(1).find("img").height())/2;
                            $img.eq(1).css({
                                'marginTop': '+='+imgTop
                            });
                        }
                    }
                }




            }else{
                if ($img.eq(eq).find("img").eq(1).offset())
                {
                    if ((vih*2+20) > vh)
                    {
                        $img.eq(eq).find("img").css({
                            'height': (vh-20)/2,
                            'width':  (vh-20)/2*viRatio
                        });
                    }else
                    {
                        $img.eq(eq).find("img").css({
                            'width':  (vw),
                            'height': (vw/viRatio)
                        });
                    }

                    if (newImg == true)
                    {
                        if ((vih*2+20) > vh)
                        {
                            var imgLeft = ($viewer.width() - $img.eq(1).find("img").width())/2;
                            $img.eq(1).css({
                                'left': '+='+imgLeft
                            });
                        }else
                        {
                            var imgTop = (($viewer.height() - $img.eq(1).find("img").height()*2))/2;
                            $img.eq(1).css({
                                'marginTop': '+='+imgTop
                            });
                        }
                    }
                }else
                {
                    if (vih > vh)
                    {
                        $img.eq(eq).find("img").css({
                            'height': vh,
                            'width':  vh*viRatio
                        });
                    }else
                    {
                        $img.eq(eq).find("img").css({
                            'width':  vw,
                            'height': vw/viRatio
                        });
                    }
                    if (newImg == true)
                    {
                        if (vih > vh)
                        {
                            var imgLeft = ($viewer.width() - $img.eq(1).find("img").width())/2;
                            $img.eq(1).css({
                                'left': '+='+imgLeft
                            });
                        }else
                        {
                            var imgTop = ($viewer.height() - $img.eq(1).find("img").height())/2;
                            $img.eq(1).css({
                                'marginTop': '+='+imgTop
                            });
                        }
                    }
                }
            }


            var buttonLMargin = $viewer.offset().left -50;
            var buttonRMargin = $viewer.width()/2 + buttonLMargin + 20;
            var buttonTop = $viewer.offset().top + $viewer.height()/2 + 10;
            buttonTop = buttonTop - 30;

            $('.right').css({
                'width': ($viewer.width()/2+70),
                'marginLeft': buttonRMargin,
                'top': $viewer.offset().top,
                'height': $viewer.height()
            });
            $('.left').css({
                'width': ($viewer.width()/2+70),
                'marginLeft': buttonLMargin,
                'top': $viewer.offset().top,
                'height': $viewer.height()
            });

            $('.arrow_right').css({
                'marginLeft': buttonRMargin + $viewer.width()/2 + 50,
                'top' : buttonTop
            });
            $('.arrow_left').css({
                'marginLeft': buttonLMargin,
                'top' : buttonTop
            });

            /*$('.foto_dropdown').css({
                'marginLeft': $viewer.width() + parseInt($viewer.css('marginLeft')) - 195
            });*/
        };
        // Run plugin
        init();
    };

    $.fn.viewer = function(options)
    {
        return this.each(function()
        {
            // if plugin has not already been attached to the element
            if ($(this).data('viewer') == undefined)
            {
                // create a new instance of the plugin
                var viewer = new $.viewer(this, options);
                $(this).data('viewer', viewer);
            }
        });
    };
})(jQuery);