LEGO.modal = LEGO.modal ? LEGO.modal : {

	small: {width:780, height:365},
	medium: {width:780, height:480},
	large: {width:780, height:500},
	legoId: {width:900, height:650},
	quickView: {width:780, height:600},
	cookieInfo: {width:955, height:590},

	shopModalDialog: null, //reference to the dialog ui

	defaultOptions: {
		width: 500,
		height: 500,
		hasCloseButton: true,
		source: null,
		href: null,
		name: null, //default value has to be set after LEGO.modal is created
		onCloseCallback: null,
		onAfterLoad: null,
		scroll:false,
		loadUrlInIframe:true
	},

	options: null, //holds the dialogs current options (defaults overridden with any supplied)

	openModal: function(event, suppliedOptions){
		var self = this;
		this.defaultOptions.name = this.small;

		// can't open more than one modal at a time
		if (sjq('shopModalDialogContainer, #shopModalDialog').length > 0) {
			return false;
		}

		//merge the default options with any that are supplied (supplied options will overwrite where set)
		var options = sjq.extend(
			true, //deep copy
			{},//use a new object so we dont overwrite the defaultOptions
			this.defaultOptions,
			suppliedOptions
	    );

		//use dimensions based on 'name' but override that if user specifically supplies new
		//dimensions in the suppliedOptions
		options.width = suppliedOptions.width || options.name.width;
		options.height = suppliedOptions.height || options.name.height;

		this.options = options;


		//create dialog + container ui and attach to body
		var dialogUI = sjq('\
			<div id="shopModalDialogContainer">\
			</div>\
			<div id="shopModalDialog" class="test-modalContainer">\
				<div class="topLeft"></div>\
				<div class="topRight"></div>\
				<div class="bottomLeft"></div>\
				<div class="bottomRight"></div>\
				<div class="topAndBottom"></div>\
				<div class="topEdge"></div>\
				<div class="bottomEdge"></div>\
				<div class="bottomFill"></div>\
				<div class="leftAndRight"></div>\
				<div class="leftEdge"></div>\
				<div class="rightEdge"></div>\
				<div class="shopDialogContent"></div>\
			</div>\
		').appendTo('body');

		//save dialog reference to make life easier later
		this.shopModalDialog = sjq('#shopModalDialog');

		//add close button if needed
		if (this.options.hasCloseButton) {
			this.shopModalDialog.append('<div class="dialogCloseButton test-modalCloseButton"></div>');
		}

		this.setSize();

		//add click handlers to close dialog if close button or background are clicked
		sjq('#shopModalDialog .dialogCloseButton, #shopModalDialogContainer').click(function(){
			LEGO.modal.close();
		});
				/*height: 266px;*/

		//insert content
		if (this.options.source){

			this.shopModalDialog.find('.shopDialogContent')
				.append(this.options.source);

			self.callLoadComplete();

		} else if(this.options.href ){
			if(this.options.loadUrlInIframe){
				sjq('<iframe class="shopDialogiFrame" name="shopModal" frameBorder="0" allowTransparency="true"></iframe>')
					.attr({
						'src': this.options.href,
						'scrolling': this.options.scroll ? 'auto' : 'no'
					})
					.appendTo('#shopModalDialog .shopDialogContent');
				self.callLoadComplete();
			}else{
				sjq.ajax({
					url: this.options.href
				})
				.success(function(content){
					self.shopModalDialog.find('.shopDialogContent')
						.append(content);
				})
				.complete(function(){
					self.callLoadComplete();
				});
			}

		}

	},

	//set the dimensions of the dialog
	//usage;     LEGO.modal.setSize({width:100, height:200})
	//if a dimension isn't supplied then the default is used
	setSize:function(suppliedOptions){
		var opts = sjq.extend(
				{//fall back to the dialogs current defaults
					width:this.options.width,
					height:this.options.height
				},
				suppliedOptions
		    );

		//set correct position and size for dialog
		this.shopModalDialog.css({
			width: opts.width,
			height: opts.height,
			//setting negative margins combined with 50% top/left in means dialog will always be centered
			//even if screen is resized
			'margin-left': -opts.width/2,
			'margin-top': -opts.height/2
		});
	},

	callLoadComplete:function(){
		if(this.options.onAfterLoad){
			this.options.onAfterLoad(sjq('#shopModalDialog'));
		}
	},

	close: function() {
		var self = this;

		var uiElements = sjq('#shopModalDialog, #shopModalDialogContainer');
		uiElements.fadeOut('500', function() {
			uiElements.remove();

			//call onclose callback after dialog has fully faded out
			if(self.options.onCloseCallback){
				self.options.onCloseCallback();
			}

			//previous close callback
			if(self.options.closer){
				self.options.closer();
			}
		});
	},

	//we can use onCloseCallback
	setClose: function(action) {
		this.options.closer = action;
	}
}