var CouponsPage = new Class({
	initialize: function ( containerId, coupons, couponOrder, selectedCoupons, featuredContainerId, featuredCouponIds, unavailableCoupons, local, numCouponsPerRow ){
		this.local = local;
		/**** Regular Coupons ****/
		this.containerId		= containerId;					// Div in which regular coupons will be displayed
		this.coupons			= coupons;
		this.couponOrder 		= couponOrder;
		this.unavailableCoupons = unavailableCoupons;
		
		/**** Featured Coupons ****/
		this.featuredContainerId 	= featuredContainerId; 	// Div in which featured coupons will be placed
		this.featuredCouponIds 		= featuredCouponIds;
		this.featuredCoupons;							// Coupons that are featured
		this.numFeaturedCouponRows = 0;
		this.numFeaturedCouponsPerRow = 2;

		this.numCouponsPerRow	= numCouponsPerRow;
		this.numCouponRows		= Math.ceil( ( this.couponOrder.length + this.unavailableCoupons.length ) / this.numCouponsPerRow );
		this.couponPage; 
		
		// Already selected Coupons
		this.selectedCoupons = selectedCoupons;	
		for ( i = 0; i < this.unavailableCoupons.length; i++ ){
			for ( j = 0; j < this.selectedCoupons.length; j++ ){
				if ( this.selectedCoupons[j].id == this.unavailableCoupons[i].id ){
					this.selectedCoupons.splice( j, 1 );
					break;
				}
			}
		}
		this.updateSelectedCouponSession();
		// Running total of selected coupons
		this.couponsValue = 0;					
				
		// Sliding in and out of Featured Coupons Container
		this.slideFx = new Fx.Slide( this.featuredContainerId );
		$( this.featuredContainerId ).setStyle( 'margin', '0px auto 0px auto' );
		this.firstPageLoad = true;	
	
		/***** Overlay ****/
		var opt = {
			valign          : 'middle',
			halign          : 'middle',
			color           : 'white',
			overlay_opacity : .80,
			duration_in     : 300,
			duration_out    : 150	
		};
		this.overlay = new xOverlayControl( opt ).setOverlay( { 
			'id':'main_overlay', 
			'class':'nooverlayclass' 
		}).setContent({
			'id': 'overlay_container',
			'html': '<div id="overlay_content" style="position:relative"><img id="back_shadow" src="/images/coupon_images/coupons_large_en_ca/back_shadow.png"/><div style="position:absolute; left:13px; top:14px;"><img id="coupon_overlay_image" src="" /></div><div style="position:absolute;top:0px;left:0px"><img src="/images/btnClose.gif" id="close_coupon_overlay"/></div></div>'
		}).setLoadingImage('/images/ajax-loader.gif');
		
		//Initialize page coupons and page elements 
		this.initializeCoupons();
		this.populateCouponPage();
		this.createMainCouponDiv();
		this.insertCouponDivs();
	},
	
	// Check for selected coupons
	initializeCoupons: function() {
		this.couponsValue = 0;
		this.featuredCoupons = new Array();
		
		for ( i = 0; i < this.couponOrder.length; i++ ){			
			// Reset coupon
			this.coupons[ this.couponOrder[i] ].featuredCoupon = null;
			this.coupons[ this.couponOrder[i] ].unSelectCoupon();
							
			//Check if coupon is in featured coupons array. If so, created featured coupon associated to it
			for ( j = 0; j < this.featuredCouponIds.length; j++ ){
				if ( this.featuredCouponIds[j] == this.couponOrder[i] ){
					var featuredCoupon = new FeaturedCoupon( this.coupons[ this.couponOrder[i] ] ); 
					this.featuredCoupons.push( featuredCoupon );	
					this.coupons[ this.couponOrder[i] ].addFeaturedCoupon( featuredCoupon );
				}
			}
			
			// Add click event to coupon
			this.coupons[ this.couponOrder[i] ].addClickEvent( this );
			
			// Check if coupon is in selected coupons array. If so, select it.
			for ( j = 0; j < this.selectedCoupons.length; j++ ){
				if ( this.coupons[ this.couponOrder[i] ].id == this.selectedCoupons[j].id ){
					this.coupons[ this.couponOrder[i] ].selectCoupon();
					this.couponsValue += this.coupons[ this.couponOrder[i] ].value;
				}
			}
		}
	},
	
	// Fill couponPage array with coupons
	populateCouponPage: function(){
		// Fill couponPage array using the couponOrder and the coupons array.
		this.couponPage = new Array();
		for ( i = 0; i < this.couponOrder.length; i++ ){
			this.couponPage[i] = this.coupons[ this.couponOrder[i] ];	
		}
		// Append the unavailable coupons to the couponPage array
		var length = this.couponPage.length;
		for ( i = 0; i < this.unavailableCoupons.length; i++ ){
			this.couponPage[ length + i ] = this.unavailableCoupons[i];
		}
	},
	
	// Create main structure for holding coupons
	createMainCouponDiv: function(){	
		// Main coupon DIV
		var container_coupons = new Element('div', {
			'id': 'container_coupons'
		}).injectInside( $( this.containerId ) );
		
		// Claim coupons button
		var claim_button = new Element( 'div', {
			'id':'claim_button',
			'html' : '<a href="/'+this.local+'/summary/" ><img id="claim_button_img" src="/'+this.local+'/coupons/images/btn_getYourCoupons_small.jpg" alt="get_my_coupons"/></a>'
		}).injectInside( $( 'container_coupons' ) );
		
		// Create coupon rows and holder divs within the rows in main coupon section
		for ( i = 0; i < this.numCouponRows; i++ ){		
			var coupon_row = new Element( 'div', {
				'id' : 'coupon_row_' + i,
				'class' : 'coupon_row'
			}).injectInside( $('container_coupons') );
			
			for ( j = 0; j < this.numCouponsPerRow; j++ ){
				var coupon_holder = new Element('div',{
					'id': 'coupon_holder_' + ( i * this.numCouponsPerRow + j),
					'class': 'coupon_holder'											
				}).injectInside( coupon_row );
			}
			var clear_div = new Element( 'div', {
				'style': 'clear:both'							
			}).injectInside( coupon_row );
		}
		
		// Another claim coupons button
		var claim_button2 = new Element( 'div', {
			'id': 'submit',
			'html': '<a href="/'+this.local+'/summary/" ><img id="claim_button_img" src="/'+this.local+'/coupons/images/btn_getYourCoupons.jpg" /></a>'
		}).injectInside( $( 'container_coupons' ) );
		
		// if there are any featured coupons, create the featured coupon div structure 
		if ( this.featuredCoupons != null ) this.createFeaturedCouponDiv();		
		
		var bottom = new Element( 'div', {
			'id': 'coupons_container_bottom'						 
		}).injectInside( $( this.containerId ) );
		
		// Update cart values
		$('num_coupons').set('html', this.selectedCoupons.length );
		$('coupons_value').set('html', '$' + this.selectedCouponsValue().toFixed(2) );
	},
	
	// Create and fill div that holds the featured coupons 
	createFeaturedCouponDiv: function(){
		// Set number of featured coupon rows
		if ( this.featuredCoupons.length < 2 ) this.numFeaturedCouponRows = 0;
		else if ( this.featuredCoupons.length >= 2 && this.featuredCoupons.length < 4  ) this.numFeaturedCouponRows = 1;	
		else if ( this.featuredCoupons.length >= 4 ) this.numFeaturedCouponRows = 2;	
		
		// Create and fill featured coupon section
		$( this.featuredContainerId ).empty();
		for ( i = 0; i < this.numFeaturedCouponRows; i++){
			var coupon_row = new Element( 'div', {
				'id' : 'coupon_row_featured_' + i,
				'class' : 'coupon_row_featured'
			}).injectInside( this.featuredContainerId );
			
			for ( j = 0; j < this.numFeaturedCouponsPerRow; j++ ){
				var coupon_holder = new Element('div', {
					'id': 'coupon_holder_featured_' + (i*this.numFeaturedCouponsPerRow + j),
					'class': 'coupon_holder_featured'											
				}).injectInside( coupon_row );
				( this.featuredCoupons[ i * this.numFeaturedCouponsPerRow + j ].couponDiv ).injectInside( coupon_holder );			
			}
			
			var clear_div = new Element( 'div', {
				'style': 'clear:both'
			}).injectInside( coupon_row );			
		}
		
		var bottom = new Element( 'div', {
			'id': 'coupons_container_featured_bottom'						 
		}).injectInside( $( this.featuredContainerId ) );
		
		// Hack for page load. if there are no featured coupons we must set the element to "display: none"
		$( this.featuredContainerId ).setStyle('display', 'block');	
		if ( this.numFeaturedCouponRows > 0 && !this.firstPageLoad ){
			this.slideFx.slideIn();
		} else if ( !this.firstPageLoad ) {
			this.slideFx.slideOut();
		} else if ( this.firstPageLoad && this.numFeaturedCouponRows == 0 ){
			$( this.featuredContainerId ).setStyle('display', 'none');	
		}
		this.firstPageLoad = false;
	},
	
	// Insert all coupons from the couponPage array into the page
	insertCouponDivs: function(){
		// Fill regular coupons section
		var j = 0;
		var row = 0;
		$$('.coupon_row').setStyle('display', 'none');
		for ( i = 0; i < this.couponPage.length; i++ ){ 
			if ( $('coupon_holder_' + i ).getFirst() ){
				$('coupon_holder_' + i ).getFirst().dispose();	
			}
			if ( this.couponPage[i] != null && this.couponPage[i].featuredCoupon == null ){
				( this.couponPage[i].couponDiv ).injectInside( $('coupon_holder_' + j) );		
				if ( j % this.numCouponsPerRow == 0 ){
					$( 'coupon_row_' + row ).setStyle( 'display', 'block' );
					row++;
				}
				j++;
			} 
		}
		// Fill featured coupons section
		for ( i = 0; i < this.numFeaturedCouponsPerRow*this.numFeaturedCouponRows; i++ ){
			if ( $('coupon_holder_featured_' + i).getFirst() ){
				$('coupon_holder_featured_' + i).getFirst().dispose();	
			}
			if ( this.featuredCoupons[i] != null ){
				( this.featuredCoupons[i].couponDiv ).injectInside( $('coupon_holder_featured_' + i) );		
			} 	
		}			
	},
	
	// Re-order coupons
	reorderCoupons: function( couponOrder, featuredCouponIds ){
		//Reset the couponOrder and featuredCouponsIds then reinitialize everything
		this.couponOrder = couponOrder.slice();
		this.featuredCouponIds = featuredCouponIds.slice();
		this.initializeCoupons();
		this.populateCouponPage();
		this.createFeaturedCouponDiv();
		this.insertCouponDivs();
	},
	
	// Add and remove coupons from selected coupons array
	addRemoveSelectedCoupon: function( coupon ){
		isSelected = false;
		for ( i = 0; i < this.selectedCoupons.length; i++ ){
			if ( this.selectedCoupons[i].id == coupon.id ){
				this.selectedCoupons.splice( i, 1 );
				coupon.unSelectCoupon();
				isSelected = true;
				break;
			}
		}
		if ( isSelected == false ){
			this.selectedCoupons.push( coupon );	
			coupon.selectCoupon();
		}

		$('num_coupons').set('html', this.selectedCoupons.length );
		$('coupons_value').set('html', '$' + this.selectedCouponsValue().toFixed(2) );
		
		this.updateSelectedCouponSession();
	},
	
	// Ajax request to update the selected coupon SESSION
	updateSelectedCouponSession: function(){
		var request = new Request({
			method: 'get',
			url: '/php/ajax/update_session.ajax.php',
			data: { 'selected_coupons': this.selectedCouponsToStr() }
		}).send();
	},
	
	// Create a comma delimited string of the selected coupons
	selectedCouponsToStr: function(){
		str = "";
		for ( i = 0; i < this.selectedCoupons.length; i++ ){
			if ( i == this.selectedCoupons.length - 1 ){
				str += this.selectedCoupons[i].id;	
			} else {
				str += this.selectedCoupons[i].id + ", ";
			}
		}
		return str;
	},
	
	selectedCouponsValue: function(){
		value = 0;
		for ( i = 0; i < this.selectedCoupons.length; i++ ){
			value += this.selectedCoupons[i].value;
		}	
		return value;
	},
	
	showOverlay: function( coupon ){
		var overlay = this.overlay;
		overlay.showLoading();				
		var asset = Asset.image( '/images/coupon_images/coupons_large_'+this.local+'/'+coupon.id+'.jpg', {
			'id': 'coupon_overlay_image',
			onProgress : function(){
				
			},
			onload : function(){
				overlay.show( null, false );
			}		
		});
		
		$('coupon_overlay_image').set( 'src', '/images/coupon_images/coupons_large_'+this.local+'/'+coupon.id+'.jpg' );

		overlay = this.overlay;
		$('close_coupon_overlay').addEvent( 'click', function(){
			overlay.hide();
			$('close_coupon_overlay').removeEvents();
			$(document).removeEvents();	
		});
		$(document).addEvent('keydown', function(event){
			if ( event.key == 'esc' ){
				overlay.hide();
				$('close_coupon_overlay').removeEvents();
				$(document).removeEvents();
			}
		});
	}
});