function setPrice ($price) {
	jQuery("#fee_regular").text($price);
}

(function($) {
	var tv = {
		data : rogers.products.tv,
		controls: {
			colorbox : {},
			container_class: '.channelBox',
			scrolling_container: '.channelScrollBox',
			channel_container_class: '.channelListBox',
			loading_class:   '.progressIndicator',
			container: {}
		},

		// Methods
		init : function () {
			// bind channel dialogue to button
			$(".Channels").click(
				function(e) {
					var element = e.srcElement || e.originalTarget;
					that.load_channels(that.get_tier_id(element.id));
				});
			this.controls.container = $( this.controls.channel_container_class );
			// set up inner scrolling box for channels
			$(this.controls.container_class).hide();
			$(this.controls.scrolling_container).css('height', '570px').css('overflow-y','scroll').css('overflow-x', 'hidden');
		},
		// Return tier by its ID
		get_tier: function( tier_id ) {
			for ( var t in this.data ) {
				if ( this.data[t].tier_id == tier_id )
					return this.data[t];
			}
			return null;
		},
		// return tier ID given CSS ID of the channels button
		get_tier_id: function( btn ) {
			for ( var d in this.data ) {
				if ( this.data[d].channels_button == '#'+btn )
					return this.data[d].tier_id;
			}
			return null;
		},

		
		// load up channel data if necessary, and show the list of channels
		load_channels: function( tier_id ) {
			this.show_colorbox();
			// short circuit if we showed channels for this tier last time
			if ( this.data.last_viewed === tier_id ) 
				return;

			this.show_loading();

			// check for cached channel data
			if ( this.get_tier(tier_id).channels  !== undefined )
				this.show_channels( tier_id );
			else
				ChannelAjax.getChannelsByTier( null, tier_id, function( response ) {
					that.handle_channels( response );
				});
			this.data.last_viewed = tier_id;
		},

		// handler for post-ajax of a channel data loading
		handle_channels: function(r) {
			// TODO Properly handle channel loading ajax errors
			if ( r.error ) {
				console.error( 'Error loading channels' );
				return false;
			}

			// cache data
			this.get_tier( r.tier_id ).channels = r.channels;
			this.get_tier( r.tier_id ).logo_url = r.logo_url;
			this.show_channels( r.tier_id );
		},
		
		// create the markup for each channel in the colorbox
		show_channels: function( tier_id ) {
			var html = "",
				tier = this.get_tier( tier_id ),
				$container = this.controls.container;

			// remove existing channels
			$container.children().not('.loading').remove();
			var i = 0;
			for ( var c in tier.channels ) {
				var channel = tier.channels[c];
				html = "<div class='channel" + (i++ % 2 == 0? " even" : " odd") + "'>"+
							"<div class='logo'><img src='"+tier.logo_url+
								"30/"+channel.logoFilename+"'></div>"+
							"<div class='right'>" +
								"<div class='number'>"+channel.channelNumber+"</div>"+
								"<div class='description'>"+channel.description+"</div>"+
								"<div class='clear'></div>"+
							"</div>" +
						"</div>";
				$container.append( html );
			}

			this.show_loading( false );
			$.colorbox({
				inline: true,
				innerHeight: "600px",
				innerWidth: "550px",
				scrolling: false,
				onComplete: function() {
					$(tv.controls.container_class).show();
				},
				onClosed: function() {
					$(tv.controls.container_class).hide();
				},
				href: this.controls.container_class
			});
		},

		// show the loading progress indicator
		show_loading: function( show ) {
			$.colorbox({
				innerHeight: "600px",
				innerWidth: "550px",
				inline: true,
				href: this.controls.loading_class
			});
		},
		
		// render the colorbox with the default settings
		show_colorbox: function() {
			this.controls.colorbox = $.colorbox({
				inline: true,
				href: this.controls.container_class,
				scrolling: true,
				open: true,
				innerHeight: "600px",
				innerWidth: "550px",
				opacity: .6
			});
		}

	},
	that = tv;
	
	// vroom vroom
	$( function(){ tv.init(); });
})(jQuery);