function CMSImage(IDnode, fileName, width, height) { this.urlTrigger = '/Images/'; this.pageExtension = '.aspx'; this.IDnode = IDnode; this.fileName = fileName; this.width = width; this.height = height; }; CMSImage.prototype.getBySize = function(width, height, canCrop, canEnlarge) { if(!width) width = this.width; if(!height) height = this.height; if(canCrop == null) canCrop = false; if(canCrop == null) canCrop = false; return env.applicationPath + this.urlTrigger + width.toString() + 'x' + height.toString() + '/' + this.IDnode.toString() + '/' + this.fileName + this.pageExtension + '?canCrop=' + ((canCrop)?'true':'false') + '&canEnlarge=' + ((canEnlarge)?'true':'false'); }; var resizeManager = { toString:function(){return 'resizeManager class'}, settings: { minW:960, minH:550, maxW:5000, maxH:4000 }, _obj:null, listeners:null, w:null, initialize:function() { this.listeners = new Array(); this.w = $(window); this.w.data('resizeManager', this); this.w.resize(function(){ var handle = $(this).data('resizeManager'); handle._obj = null; handle.onresize(); }); this.w.resize(); }, getSize:function() { if(this._obj == null) { var b = $(document.body); var previous_overflow = b.css('overflow'); b.css('overflow', 'hidden'); var obj = new Object(); obj.width = this.width(); obj.height = this.height(); obj.marginH = Math.floor((obj.width - this.settings.minW) / 2); obj.marginV = Math.floor((obj.height - this.settings.minH) / 2); this._obj = obj; b.css('overflow', previous_overflow); } return this._obj; }, onresize:function() { var o = this.getSize(); for(var i = 0; i < this.listeners.length; i++) this.listeners[i].onresize(o); }, width:function() { return Math.min(Math.max(this.w.width(), this.settings.minW), this.settings.maxW); }, height:function() { return Math.min(Math.max(this.w.height(), this.settings.minH), this.settings.maxH); }, addListener:function(obj) { for(var i = 0; i < this.listeners.length; i++) if(this.listeners[i] == obj) return; this.listeners.push(obj); }, removeListener:function(obj) { var new_listeners = new Array(); for(var i = 0; i < this.listeners.length; i++) if(this.listeners[i] != obj) new_listeners.push(this.listeners[i]); } }; $(document).ready(function(){ resizeManager.initialize(); }); var bgManager = { settings:{ fadeIn:500, step:100, margin:{top:0,right:0,bottom:0,left:120} }, base:null, initialize:function() { if(this.base != null) return; this.base = $('<div></div>'); $('*:first', document.body).before(this.base); this.base.css('position', 'absolute').css('top', this.settings.margin.top).css('left', this.settings.margin.left).css('z-index', 0).css('overflow','hidden'); resizeManager.addListener(this); resizeManager.onresize(); }, show:function(cmsImage, canCrop) { if(cmsImage == null) { this.refactor(); return; } if(canCrop == null) canCrop = true; var w = resizeManager.width() - this.settings.margin.left - this.settings.margin.right; var h = resizeManager.height() - this.settings.margin.top - this.settings.margin.bottom; w = Math.floor(w / this.settings.step) * this.settings.step; h = Math.floor(h / this.settings.step) * this.settings.step; var image = $('<img src="' + cmsImage.getBySize(w, h, canCrop, true) + '" />'); image.css('position', 'absolute'); image.hide(); image.data('cmsImage', cmsImage); image.data('canCrop', canCrop); image.load(function(){ var j = $(this); var imageSize = {width:j.width(), height:j.height()}; j.data('size', imageSize); var obj = {width:resizeManager.width(), height:resizeManager.height()}; bgManager.onresize(obj); bgManager.refactor(); $(this).toggleClass('removable', true); j.fadeTo(bgManager.settings.fadeIn, 1.0); }); this.base.append(image); }, onresize:function(obj) { var baseWidth = obj.width - this.settings.margin.left - this.settings.margin.right; var baseHeight = obj.height - this.settings.margin.top - this.settings.margin.bottom; this.base.width(baseWidth).height(baseHeight); $('img', this.base).each(function(){ var j = $(this); var imageSize = j.data('size'); if(!imageSize) return; var canCrop = j.data('canCrop'); var factorX = imageSize.width / baseWidth; var factorY = imageSize.height / baseHeight; var factor = null; if(canCrop) factor = Math.min(factorX, factorY); else factor = Math.max(factorX, factorY); j.width(Math.ceil(imageSize.width / factor)); j.height(Math.ceil(imageSize.height / factor)); j.css('left', Math.round((baseWidth - j.width()) / 2)); j.css('top', Math.round((baseHeight - j.height()) / 2)); }); }, refactor:function() { $('img.removable', this.base).animate({'opacity':0.0},{queue:false,duration:this.settings.fadeIn,easing:'swing',complete:function(){ $(this).remove(); }}); } }; $(function(){bgManager.initialize()}); bgManager.settings.margin = {top:0,right:0,bottom:0,left:0}; $(function(){ if(bgImage != null) bgManager.show(bgImage); bgManager.base.css('opacity', 0.5); $(document.body).css('background-color', '#000'); var resizeListener = new Object(); resizeListener.onresize = function(size) { $('#main').width(size.width).height(size.height); var container = $('#container'); var marginLeft = Math.floor((size.width - container.width()) / 2); var marginTop = Math.floor((size.height - container.height()) / 2); container.css('margin-left', marginLeft).css('margin-top', marginTop); }; resizeManager.addListener(resizeListener); resizeManager.onresize(); });