/*
* Overlay layer and popup
*/

(function($) { 
$.ti.popup = {
	
	options: {
        width: '600px',          // Pixel value width
        zIndex: 9100,            // Overlay z-index - pop up is over this
        opacity: '0.7',          // Overlay opacity
        bgColour: '#5c5c5c',     // Overlay background colour
        vPos: 100,           // Vertical position of popup from top of viewport- Pixel value
        hPos: 'center',          // Horizontal position - pixel value can replace 'center'
        closeButton: ['#close'],   // Array - element(s) to attach close function to
        callback: false,		 // function to call once loaded
		content: false,			 // string: html inside the popup
		insertPoint: '#swapable'  // point at which to insert content
    },
	
	html:   $([ '<div class="popup" id="popUp">',					
                    '<div class="content clearfix">',
						'<span id="close"><img src="/shared/resource/images/itinerary_planner/buttons/popup-close.png" width="33" height="35" alt="close window" /></span>',
						'<div id="swapable">',
						'</div>',
					'</div>',
                '</div>'
            ].join('')),	
	
	overlay: function() {
		var html, docHeight;
		
		html = $('<div id="overlay"></div>');
		docHeight = $(document).height();
		
		// Apply overlay css
		$(html).css({
            'height': docHeight,
            'width': '100%',            
            'z-index': this.options.zIndex,
            'position': 'absolute',
            'top': '0',
            'left': '0',
            'background-color': this.options.bgColour
        });
		
		// Do opacity seperatly to accomodate IE's method
        $(html).fadeTo(0, this.options.opacity);
		
		// Append Overlay
        $(document.body).prepend(html);
	},
	
	init:	function(settings) {				
		this.options.hPos = 'center';
		
		if (settings) {
			$.extend(this.options, settings);
		}
        
        // Get center position
        if(this.options.hPos === 'center') {            
            this.options.hPos = this.getCenter(this.options.width);            
        }
        
		// Apply popup CSS
		$(this.html).css({
            'z-index': (this.options.zIndex + 10),
            'position': 'absolute',
            'width': this.options.width,
            'top': this.getTop(this.options.vPos),
            'left': this.options.hPos
        });
		
		this.overlay();
		
		$('#overlay').after(this.html);
		
		// Append popup content
		if(this.options.insertPoint) {
			$(this.options.insertPoint, this.html).append(this.options.content);	
		}
	
        $(this.html).tiClearInputs();
		
		this.closeEvents();
				
		if(this.options.callback) {
			this.options.callback();	
		}        

	},
	
    // Returns a distance in pixels from the left to center the popup
	getCenter: function(popUpWidth) {
		return Math.round(($(document).width() - parseInt(popUpWidth, 10)) /2);
	},
    
    // Returns the scroll position of the viewport + the height set in options
    getTop: function(top) {
        return ($(window).scrollTop() + top);        
    },
	
	// Attach close event to all close buttons
	closeEvents: function() {
		var count, length;
		
		length = this.options.closeButton.length;
		
		for(count = 0; count < length; count += 1) {
			
			$(this.options.closeButton[count]).unbind('click.close');
			$(this.options.closeButton[count]).bind('click.close', function(){				
				$.ti.popup.close();
			});
		}
	},
	
	swapContent: function(content, newWidth, callback) {
		var leftPos = $.ti.popup.getCenter(newWidth);		

		$('#swapable').height($('#swapable').height());

		$('#popUp').animate({
			"width": newWidth,
			"left": leftPos
		}, 500);

		$('#swapable').fadeTo(500, 0, function(){
										$(this).empty()
											   .append(content);
										callback();
										$(this).animate({
											 "height": $('#swapableContent').height()											 
										 }, 500, function(){
												 $('#swapable').fadeTo(500, 1, function(){
																				 $('#swapable').css({height: 'auto'
																				 });
																			 });
												 }
										 );
										}
		);
		$(content).tiClearInputs();
	},
	
	close: function() {		
		$('#popUp').fadeOut('500', function(){
			// reset form
			$.ti.utils.resetFields($('input', '#popUp'));
			$.ti.utils.clearErrors('#popUp');
			$('#swapable').css({
				height: 'auto'				
			}).empty();			
			$('#popUp').remove().fadeIn();			
		});              
        $('#overlay').fadeOut('500', function(){$('#overlay').remove().show();});
	}
};
})(jQuery);