$(document).ready(function () {
    if (images_list.length > 0) {
        //Drawing main image view
        var main_img = $('#p-i img');
        var this_height = 300;
        var this_width = getAspectedWidth(this_height, images_list[0][2], images_list[0][3]);
        $(main_img).load(function () {
            $(this).css('display', 'none');
            if (images_list[0][3] < this_height) {
                $(this).attr('height', images_list[0][3]);
                $(this).attr('width', images_list[0][2]);
            } else {
                $(this).attr('height', this_height);
                $(this).attr('width', this_width);
            }
            $('#p-i').append(this);
            $(this).fadeIn().addClass('zoomable');
        }).error(function () {
//			$('#product-img-container-main').empty();
        }).attr({
            'src': 'https://content.it4profit.com/pimg/s/resize/' + getAspectedWidth('300', images_list[0][2], images_list[0][3]) + 'x300x' + images_list[0][2] + 'x' + images_list[0][3] + '/' + images_list[0][1] + '.' + images_list[0][4],
            'osrc': 'https://content.it4profit.com/pimg/s/resize/' + getAspectedWidth('300', images_list[0][2], images_list[0][3]) + 'x300x' + images_list[0][2] + 'x' + images_list[0][3] + '/' + images_list[0][1] + '.' + images_list[0][4],
            'himg': 'https://content.it4profit.com/pimg/s/resize/' + images_list[0][2] + 'x' + images_list[0][3] + 'x' + images_list[0][2] + 'x' + images_list[0][3] + '/' + images_list[0][1] + '.' + images_list[0][4],
            'himgw': images_list[0][2],
            'himgh': images_list[0][3],
            'ow': this_width,
            'oh': this_height
        }).parent().zoom();

        //Drawing previewed images
        $(images_list).each(function (index, value) {
            var this_height = 60;
            var this_width = getAspectedWidth(this_height, value[2], value[3]);
            var curr = $("#product-img-container-small-" + value[0]);
            var curr_anchor = $("#product-img-container-small-" + value[0] + " a");
            var img = new Image();
            $(img).load(function () {
                $(this).css('display', 'none');
                $(this).attr('width', this_width);
                $(this).attr('height', this_height);
                $(curr_anchor).append(this);
                $(this).fadeIn();
            }).error(function () {
//					$(curr).remove();
            }).attr('src', 'https://content.it4profit.com/pimg/s/resize/' + this_width + 'x' + this_height + 'x' + value[2] + 'x' + value[3] + '/' + value[1] + '.' + value[4]);
            $(curr_anchor).bind('click', function () {
                switchImage('https://content.it4profit.com/pimg/s/resize/' + getAspectedWidth('300', value[2], value[3]) + 'x300x' + value[2] + 'x' + value[3] + '/' + value[1] + '.' + value[4], 'https://content.it4profit.com/pimg/s/resize/' + value[2] + 'x' + value[3] + 'x' + value[2] + 'x' + value[3] + '/' + value[1] + '.' + value[4], value[2], value[3], getAspectedWidth('300', value[2], value[3]), '300');
            });
        });
    }

    $('img.zoomable').click(function () {
        djam1('<div class="close">затвори</div><br><img src="' + $(this).attr('src') + '">');
    });

})

//Get resized image width accrding to height and aspect ratio
function getAspectedWidth(new_height, old_width, old_height) {
    var new_width = 0;
    try {
        new_width = (new_height * old_width) / old_height;
    } catch (error) {

    }
    return Math.round(new_width);
}

function switchImage(iurl, ibimgurl, hw, hh, ow, oh) {
    var img = $('#p-i img');
    $(img).css('display', 'none');
    $(img).hide();
    $(img).attr({
        'ow': ow,
        'oh': oh
    });
    /*
     */
    $('#p-i-z-s').css('display', 'block');
    if (!$('#p-i').hasClass('zoomable') && $('#p-i').hasClass('draggable') && $(img).hasClass('zoomable')) {

        var i = new Image();
        i.onload = function () {
            $(img).attr('himg', ibimgurl);
            $(img).attr('himgw', hw);
            $(img).attr('himgh', hh);
            $(img).attr('osrc', iurl);
            $(img).attr('src', ibimgurl);
            $('#p-i-z-s').fadeOut("fast");
            $('#p-i').css('background', "url('" + ibimgurl + "') no-repeat");
        };
        i.src = ibimgurl;

        var ii = new Image();
        ii.onload = function () {
            $(img).attr('osrc', iurl);
        };
        ii.src = ibimgurl;

    } else {
        var i = new Image();
        i.onload = function () {
            $(img).attr('himg', ibimgurl);
            $(img).attr('himgw', hw);
            $(img).attr('himgh', hh);
            $(img).attr('osrc', iurl);
            $(img).attr('src', iurl);
            $(img).fadeIn("fast");
            $('#p-i-z-s').fadeOut("fast");
            $('#p-i').css('background', "");
        };
        i.src = iurl;
    }
    $(img).css({
        width: ow + 'px',
        height: oh + 'px',
        top: '0px',
        left: '0px',
        display: 'none'
    });
    if (hw > 500 || hh > 400) {
        $(img).addClass('zoomable');
        $('#p-i-z-p').show();
    } else {
        $(img).removeClass('zoomable');
        $('#p-i-z-p').hide();
    }
}

$.fn.extend({
    zoom: function () {
        return this.each(function () {
            var clicked = false;
            var start_x;
            var start_y;
            var drag_div = this;
            var bgimg = $('#' + this.id + ' img');
            var start = false;
            var preload = $('#' + this.id + ' div');
            var link_ = $('#' + this.id + ' a');
            var init_w = $(this).width();
            var init_h = $(this).height();
            var drag_w = $(bgimg).attr('himgw');
            var drag_h = $(bgimg).attr('himgh');
            var leftpos = 0;
            var toppos = 0;

            bgimg.attr('width', init_w);
            bgimg.attr('height', init_h);

            link_.fadeIn("fast");
            function initPos(obj, key) {
                if (key)
                    obj.css('background', "url('" + bgimg.attr('himg') + "') no-repeat " + ((obj.width() - drag_w) / 2) + "px " + ((obj.height() - drag_h) / 2) + "px");
                leftpos = (init_w - drag_w) / 2;
                toppos = (init_h - drag_h) / 2;
            }
            function endPos(obj, key) {
                if (key)
                    obj.css('background', "");
            }
        });
    }
});

/*-------------------------------------------- zoomable end ---------------------------------------*/
function doOpenEcatalog(item, supplier) {
    var url = 'http://www.it4profit.com/ecatalog/userend/pCardGate.jsp?';
    url += '&SUPPLIER=' + supplier;
    url += '&ITEM=' + item;
    window.open(url, 'eatalog_gate_' + item);
}