<div class="modal-back" id="big-gallery" style="display: none;">
    <div class="gallery-wrapper">
        <div class="gallery-content">
            <div class="fake-prev-btn"></div>
            <div class="fake-next-btn"></div>
            <div class="center-wrapper">
                <div class="header-combined">
                    <h2></h2>
                    <a href="#" class="gallery-link close-gal"><?php echo Yii::t('site','Закрыть галерею');?></a>
                </div>
                <div class="gallery-image-block">
                    <a class="gall-arrow-prev"></a>
                    <a class="gall-arrow-next"></a>

                    <div class="gallery-image">

                    </div>
                    <div class="photo-title-wrap">
                        <div class="soc-share">
                            <!-- Put this div tag to the place, where the Like block will be -->
                            <?php
                            $this->renderPartial('//snippets/likes', array(
                                'url' => Yii::app()->getBaseUrl(true) . Yii::app()->request->getUrl(),
                            ));
                            ?>
                        </div>

                        <div class="photo-info"></div>
                        <div class="photo-num"></div>
                    </div>
                </div>
            </div>
            <div class="gallery-images-list-wrap">
                <span class="gall-tail"></span>
                <a class="gall-small-arrow-prev"></a>
                <a class="gall-small-arrow-next"></a>

                <div class="gallery-images-list">
                    <div class="gallery-images-list-long">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function makeGallery(items, title, likes) {
        var gallery = $('#big-gallery');
        var minHeight = $(window).height() - $('.header-combined h2', gallery).outerHeight() - 238;//as client wish
        var maxHeightImageUnresized = 500;
        if (window.bigGallery != undefined) return;

        window.bigGallery = {'open':false};
        likes = likes ? likes : false;
        if (likes) {
            $('.photo-info', gallery).css('display', 'none');
            $('.soc-share', gallery).css('display', 'block');
        } else {
            $('.photo-info', gallery).css('display', 'block');
            $('.soc-share', gallery).css('display', 'none');
        }
        //todo: move to css
//        gallery.css({
//            'overflow':'auto'
//        });
//        $('.gallery-wrapper', gallery).css({
//            'position':'static'
//        });
//        $('.gallery-content', gallery).css({
//            'position':'static',
//            'padding-bottom':'0px'
//        });
//        $('.gallery-images-list-wrap', gallery).css({
//            'position':'relative'
//        });
//        $('.photo-title-wrap').css('margin-top', '10px');

        // setup gallery
        $('.header-combined h2', gallery).text(title);
        $('.close-gal', gallery).click(function () {
            gallery.css('display', 'none');
            $('body').removeClass('no-scroll');
            window.bigGallery.open = false;
            $('.gallery-image').html('');
        });
        var imagesList = $('.gallery-images-list-long', gallery);
        var photoNum = $('.photo-num', gallery);
        var photoInfo = $('.photo-info', gallery);
        // create items preview
        var i, data, html, videoCount = 0, photoCount = 0;
        for (i = 0; i < items.length; i++) {
            data = items[i];
            if (data['type'] == 'video') {
                videoCount += 1;
                html = $('<a href="#"><img src="' + data['preview'] + '"/><span class="video-duration"></span></a>');
                videoInfo(data['id'], (function (dest) {
                    return function (preview, title, desc, time) {
                        $('.video-duration', dest).text(time);
                    }
                })(html));
            } else {
                photoCount += 1;
                html = $('<a href="#"><img src="' + data['preview'] + '"/></a>');
            }
            imagesList.append(html.attr('id', 'image-preview' + i).data('index', i));
        }
        imagesList.on('click', 'a', function () {
            var preview = $(this);
            switchTo(0 + preview.data('index'));
        });

        var imageHeight;//= $(window).height() - $('.header-combined h1', gallery).outerHeight()  - 282;
        var previewsPos = 0;
        var previewWidth = 109;

        var currentIndex;

        function updHeight(imageTrueHeight) {
            imageHeight = imageTrueHeight;
            if (minHeight < maxHeightImageUnresized){
                if (imageTrueHeight > maxHeightImageUnresized){
                    imageHeight = maxHeightImageUnresized;
                }
                else {
                    if (imageTrueHeight < minHeight) {
                        imageHeight = minHeight;
                    }
                    else {
                        imageHeight = imageTrueHeight;
                    }
                }
            }
            else {
                imageHeight = minHeight;
            }

            $('.gallery-image').height(imageHeight);
            $('.fake-prev-btn').css({
                'top': $('.header-combined h2', gallery).outerHeight() + 47,
                'height' : imageHeight,
                'width' : ($(window).width() - 796)/2
            });
            $('.fake-next-btn').css({
                'top':$('.header-combined h2', gallery).outerHeight() + 47,
                'height':imageHeight,
                'width' : ($(window).width() - 796)/2
            });
        }

        $(window).resize(function(){
            if(window.bigGallery.open){
                var h, w, imgRealHeight;
                if($('.gallery-image img').length >0){
                    h =$('.gallery-image img').attr('height');
                    w =$('.gallery-image img').attr('width');
                    imgRealHeight = $('.gallery-image img').height();
                    updHeight(imgRealHeight);
                    var h0 = $('.gallery-image').height(), w0 = $('.gallery-image').width();
                    //var nw = imageHeight * w / h, nh = imageHeight;
                    var nw, nh,
                        marginTop = 0, marginLeft = 0;
                    if((w < w0)&&(h < h0)){
                        nw= w;
                        nh = h;
                        marginTop = (h0 - nh)/2;
                        marginLeft = (w0 - nw)/2;
                    }
                    else{
                        if ((w > w0)&&(h < h0)){
                            nw = w0;
                            nh = h * nw /w;
                            marginTop = (h0 - nh)/2;
                        }
                        else{
                            if((w < w0)&&(h > h0)){
                                nh = h0;
                                nw = w * nh / h;
                                marginLeft = (w0 - nw)/2;
                            }
                            else{
                                if (w/w0 > h/h0){
                                    nw = w0;
                                    nh = h * nw / w;
                                    marginTop = (h0 - nh) / 2;
                                }
                                else {
                                    nh = h0;
                                    nw = w * nh / h;
                                    marginLeft = (w0 - nw) / 2;
                                }
                            }
                        }
                    }
                    $('.gallery-image img').attr('height',nh);
                    $('.gallery-image img').attr('width',nw);
                    $('.gallery-image img').css({
                        'margin-top':marginTop
                    })
                }

            }
        });
        function switchTo(i) {

            if (!window.bigGallery.open) {
                $('body').addClass('no-scroll');
                gallery.css('display', 'block');
                window.bigGallery.open=true;
            }
            if (imageHeight === undefined) updHeight(minHeight);

            if (i == currentIndex) return;
            var data = items[i], item;
            if (data['info'] !== undefined)
                photoInfo.html(data['info']);
            if (data['title'] !== undefined) {
                $('.header-combined h2', gallery).text(data['title']);
                //updHeight(minHeight);
            }
            if (data['type'] == 'video') {
                var hh = $('.gallery-image').height();
                hh=hh<500?500:hh;
                item = $('<iframe frameborder="0" allowfullscreen/>').attr('src', 'http://www.youtube.com/embed/' + data['id'])
                    .height(hh)
                    .width($('.gallery-image').width()/*796 imageHeight*640/360 */);
                $('.gallery-image').html(item);
                updHeight(hh);
            } else {
                var t = new Image();
                t.onload = function () {
                    var h = t.height;
                    var w = t.width;
                    updHeight(h);
                    var h0 = $('.gallery-image').height(), w0 = $('.gallery-image').width();
                    //var nw = imageHeight * w / h, nh = imageHeight;
                    var nw, nh,
                        marginTop = 0, marginLeft = 0;
                    if ((w < w0) && (h < h0)) {
                        nw = w;
                        nh = h;
                        marginTop = (h0 - nh) / 2;
                        marginLeft = (w0 - nw) / 2;
                    }
                    else {
                        if ((w > w0) && (h < h0)) {
                            nw = w0;
                            nh = h * nw / w;
                            marginTop = (h0 - nh) / 2;
                        }
                        else {
                            if ((w < w0) && (h > h0)) {
                                nh = h0;
                                nw = w * nh / h;
                                marginLeft = (w0 - nw) / 2;
                            }
                            else {
                                if (w *h0 > h *w0) {
                                    nw = w0;
                                    nh = h * nw / w;
                                    marginTop = (h0 - nh) / 2;
                                }
                                else {
                                    nh = h0;
                                    nw = w * nh / h;
                                    marginLeft = (w0 - nw) / 2;
                                }
                            }
                        }
                    }
                    t.height = nh;
                    t.width = nw;


                    $('.gallery-image').html(t).children('img').css({
                        'margin-top':marginTop
                    });
                };
                t.src = data['image'];
            }

            //$('.gallery-image').html(item);
            $('a', imagesList).removeClass('active');
            imagesList.find("#image-preview" + i).addClass('active');
            currentIndex = i;
            photoNum.text(((data['type'] == 'video') ? 'Видео ' + (currentIndex + 1) + ' из ' + videoCount : 'Фото ' + (currentIndex + 1 - videoCount) + ' из ' + photoCount));
            var cLeft = i * previewWidth;
            if (cLeft - previewsPos + 109 > $('.gallery-images-list').width()) {
                previewsPos = cLeft + 109 - $('.gallery-images-list').width();
                imagesList.animate({'left':'-' + previewsPos + 'px'}, 100);
            }
            if (cLeft - previewsPos < 0) {
                previewsPos = cLeft;
                imagesList.animate({'left':'-' + previewsPos + 'px'}, 100);
            }
        }

        $('.gall-arrow-prev').click(function () {
            switchTo((currentIndex - 1 + items.length) % items.length);
        });
        $('.fake-prev-btn').click(function () {
            switchTo((currentIndex - 1 + items.length) % items.length);
        });
        $('.gall-arrow-next').click(function () {
            switchTo((currentIndex + 1) % items.length);
        });
        $('.fake-next-btn').click(function () {
            switchTo((currentIndex + 1) % items.length);
        });

        $('.gall-small-arrow-prev', gallery).click(function () {
            previewsPos -= 109;
            if (previewsPos < 0) previewsPos += 109;
            imagesList.animate({'left':'-' + previewsPos + 'px'}, 100);
        });
        $('.gall-small-arrow-next', gallery).click(function () {
            previewsPos += 109;
            if (previewsPos > 109 * (items.length - 1) - $('.gallery-images-list').width()) previewsPos -= 109;
            imagesList.animate({'left':'-' + previewsPos + 'px'}, 100);

        });
        function videoInfo(videoId, callback) {
            $.getJSON(
                'http://gdata.youtube.com/feeds/api/videos/' + videoId + '?v=2&alt=jsonc&callback=?',
                function (json) {
                    var time = json["data"]['duration'],
                        hours = Math.floor(time / 3600).toString(),
                        minutes = (Math.floor(time / 60) % 60).toString(),
                        seconds = (time % 60).toString();
                    if (hours != '0') time = ((hours.length == 2) ? hours : '0' + hours) + ':'; else time = '';
                    time += ((minutes.length == 2) ? minutes : '0' + minutes) + ':';
                    time += ((seconds.length == 2) ? seconds : '0' + seconds);

                    callback(
                        json["data"]["thumbnail"]["sqDefault"],
                        json["data"]['title'],
                        json["data"]['description'],
                        time);
                }
            );
        }

        window.bigGallery.switchTo = switchTo;
    }
</script>