var zoomObj = {
    _boxId                  : 'zoomObjBox',
    _contentId              : 'zoomObjContent',
    _additionalContentId    : 'zoomObjAdditionalContent',
	_additionalParentId		: null,
    _settings : {
        boxWidth 	: 400,
        boxHeight 	: 400,
        isMobile 	: false
    },

    _data : {
        content     : {},
        additional  : {}
    },

    init : function (parentId, additionalParentId, isMobile) {
        _this = this;
        if ('undefined' !== typeof(additionalParentId)) {
        	_this._additionalParentId = additionalParentId;
        }
        if ('undefined' !== typeof(isMobile) && true == isMobile) {
        	_this._settings.isMobile = true;
        }
        jQuery('#' + parentId).empty();
        jQuery('#' + parentId).append('<div id="' + _this._boxId + '"></div>')
        jQuery('#' + parentId).append('<div id="' + _this._contentId + '"></div>');
        jQuery('#' + parentId).append('<div id="' + _this._additionalContentId + '"></div>');
        var contentList = '<ul class="contentList"></ul>';
        jQuery('#' + _this._contentId).append(contentList);
        var contentAdditionalList = '<ul class="contentAdditionalList"></ul>';
        jQuery('#' + _this._additionalContentId).append(contentAdditionalList);
    },

    configure : function (key, value)
    {
        if ('undefined' !== typeof(_this._settings[key]))
        {
            _this._settings[key] = value;
        }
    },


    add : function (objContent) {
        _this._data.content = objContent;
        var first = true;
        for (var i in objContent) {
            var id = 'itemLi' + i;
            var image = '<img data-type="content" data-id="' + i + '" id="' + i + '" src="' + objContent[i]['icon'] + '" class="contentListItemImg"';
            if ('undefined' !== typeof(objContent[i]['title']) && objContent[i]['title'] != '') {
                image += 'title="' + objContent[i]['title'] + '" ';
            }
            image += '/>';
            var preloadImg = '<img src="' + objContent[i]['img'] + '" style="width:0px;height:0px" />';
            var preloadBig = '';
            if (false === _this._settings.isMobile) {
				var preloadBig = '<a rel="fancybox" href="' + objContent[i]['big'] + '"><img src="' + objContent[i]['big'] + '" style="width:0px;height:0px" /></a>';
            }
            var entry = '<li id="' + id + '" class="contentListItem">' + image + preloadImg + preloadBig + '</li>';
            jQuery('#' + _this._contentId + ' ul.contentList').append(entry);

            if (true === first) {
                var current = i;
                window.setTimeout(function () {
                    _this._initBox('content', current);
                }, 100);
            }
            first = false;
        }

        jQuery('li > .contentListItemImg').on('click', function () {
           _this._initBox(jQuery(this).attr('data-type'), jQuery(this).attr('data-id'));
        });
    },
    addAdditional : function (objContent) {
        jQuery('#' + _this._additionalContentId + ' .contentAdditionalList').empty();
        _this._data.additional = objContent;
        var first = true;
        for (var i in objContent) {
            var id = 'itemLiAdditional' + i;
            var image = '<img data-type="additional" data-id="' + i + '" id="' + i + '" src="' + objContent[i]['icon'] + '" class="contentAdditionalListItemImg"';
            if ('undefined' !== typeof(objContent[i]['title']) && objContent[i]['title'] != '') {
                image += 'title="' + objContent[i]['title'] + '" ';
            }
            image += '/>';
            var preloadImg = '<img src="' + objContent[i]['img'] + '" style="width:0px;height:0px" />';
            var preloadBig = '';
            if (false === _this._settings.isMobile) {
            	var preloadBig = '<a rel="fancybox" href="' + objContent[i]['big'] + '"><img src="' + objContent[i]['big'] + '" style="width:0px;height:0px" /></a>';
            }
            var entry = '<li id="' + id + '" class="contentListAdditionalItem">' + image + preloadImg + preloadBig + '</li>';
            jQuery('#' + _this._additionalContentId + ' ul.contentAdditionalList').append(entry);

            if (true === first) {
                var current = i;
                window.setTimeout(function () {
                    _this._initBox('additional', current);
                }, 100);
            }
            first = false;
        }

        if (null !== _this._additionalParentId) {
			jQuery('#' + _this._additionalParentId).html(jQuery('#' + _this._additionalContentId).html());
			jQuery('#' + _this._additionalContentId).hide();
			jQuery('.contentAdditionalList').css('clear', 'both');
		}

		jQuery('li > .contentAdditionalListItemImg').on('click', function () {
           _this._initBox(jQuery(this).attr('data-type'), jQuery(this).attr('data-id'));
        });
    },

    _initBox : function (type, id) {
        if ('undefined' !== typeof(type) && 'undefined' !== typeof(_this._data[type])) {
            var data = _this._data[type];
            if ('undefined' !== typeof(data[id])) {
            	if (false === _this._settings.isMobile) {
	            	var imgObj = _this._getImageDimensions(type, id);
	                var image = '<div class="previewContainer">'
	                	+ '<a rel="fancybox" href="' + data[id]['big'] + '">'
	                	+ '<img src="' + data[id]['img'] + '" style="width:' + _this._settings.boxWidth + 'px;height:' + _this._settings.boxHeight + 'px;" />'
	                	+ '</a>'
	                	+ '</div>';
	                var realImage = '<div class="realContainer" style="display:none;background-image: url(\'' + data[id]['big'] + '\');"></div>';
	                jQuery('#' + _this._boxId)
	                    .html('')
	                    .append(image)
	                    .append(realImage);

	             	jQuery('#' + _this._boxId + ' .previewContainer img')
	                    .on('mouseover', function () {
	                        jQuery('#' + _this._boxId + ' > .realContainer').show();
	                        jQuery(this).bind('mousemove', function (event) {
								if (0 == imgObj.width || 0 == imgObj.height || 0 == imgObj.heightOriginal || 0 == imgObj.widthOriginal) {
									imgObj = _this._getImageDimensions(type, id);
								}
	                            var left = event.pageX - this.offsetLeft;
	                            var top = event.pageY - this.offsetTop;
	                            var containerWidth = parseInt(jQuery('#' + _this._boxId + ' .realContainer').width());
	                            var containerHeight = parseInt(jQuery('#' + _this._boxId + ' .realContainer').height());
	                            var posLeft = left * (imgObj.widthOriginal / imgObj.width) - (containerWidth / 2);
	                            var posTop = top * (imgObj.heightOriginal / imgObj.height) - (containerHeight / 2);
	                            if (posLeft > (imgObj.widthOriginal - containerWidth)) {
	                                posLeft = imgObj.widthOriginal - containerWidth;
	                            }
	                            if (posLeft < 0) posLeft = 0;
	                            if (posTop > (imgObj.heightOriginal - containerHeight)) {
	                                posTop = imgObj.heightOriginal - containerHeight;
	                            }
	                            if (posTop < 0) posTop = 0;
	                            jQuery('#' + _this._boxId + ' > .realContainer')
	                                .css('background-position', '-' + posLeft + 'px -' + posTop + 'px');
	                        });

	                    })
	                    .on('mouseout', function () {
	                        jQuery(this).unbind('mousemove');
	                        jQuery('#' + _this._boxId + ' > .realContainer').hide();
	                    });

	                jQuery("a[rel=fancybox]").fancybox({
						'transitionIn' : 'none',
						'transitionOut' : 'none',
						'titlePosition' : 'over'
					});
				} else {
	                var image = '<div class="previewContainer">'
	                	+ '<img src="' + data[id]['img'] + '" style="width:' + _this._settings.boxWidth + 'px;height:' + _this._settings.boxHeight + 'px;" />'
	                	+ '</div>';
	                jQuery('#' + _this._boxId)
	                    .html('')
	                    .append(image);
				}
            }
        }
    },

    _getImageDimensions : function (type, id)
    {
        var imgObj = new Image();
        imgObj.src = _this._data[type][id]['big'];
        imgObj.widthOriginal = imgObj.width;
        imgObj.heightOriginal = imgObj.height;
        if (imgObj.width > _this._settings.boxWidth && imgObj.height > _this._settings.boxHeight) {
            var scaleX = imgObj.width / _this._settings.boxWidth;
            var scaleY = imgObj.height / _this._settings.boxHeight;
            if (scaleX > scaleY) {
                imgObj.width    = parseInt(imgObj.width / scaleX);
                imgObj.height   = parseInt(imgObj.height / scaleX);
            } else {
                imgObj.width    = parseInt(imgObj.width / scaleY);
                imgObj.height   = parseInt(imgObj.height / scaleY);
            }
        } else if (imgObj.width > _this._settings.boxWidth) {
            imgObj.height   = parseInt(imgObj.height * (_this._settings.boxWidth / imgObj.width));
            imgObj.width    = _this._settings.boxWidth;
        } else  if (imgObj.height > _this._settings.boxHeight) {
            imgObj.width    = parseInt(imgObj.width * (_this._settings.boxHeight / imgObj.height));
            imgObj.height   = _this._settings.boxHeight;
        }
        return imgObj;
    }
}