/*
* Render open panel
*
* Triggers: PANEL_OPENED, PANEL_CLOSING
*/
(function($) {
$.ti.panelContent = $.prototype = {
	html:	$([	'<div class="planner" id="panel">',
					'<div id="autoShow">',
					'<label for="showOnAdd">',
						'<input type="checkbox" id="showOnAdd" />',
						'Show the calendar view every time an item is added to the to do list</label>',
					'</div>',
					'<div id="currentTripName">',
						'<label for="currentTripNameInput" class="accessibility">Current Trip name</label>',
						'<input type="text" id="currentTripNameInput" value="" />',
					'</div>',
				    '<div id="otherTrips">',
						'<a href="#" id="createNewTrip" class="call-to-action">Create a new Trip</a>',
				    '</div>',
					'<a href="/us/tripplannerhelp" target="_blank" id="help">Help</a>',
					'<div id="tabs">',
						'<ul class="tabs">',
							'<li><a href="#plannerTabContent" id="plannerTab">Trip Planner</a></li>',
							'<li><a href="#mapTabContent" id="mapTab">Maps</a></li>',
						'</ul>',
						'<div id="tabContentWrapper">',
							'<span id="tabContentCornerTopLeft" class="tabContentCorner" />',
							'<span id="tabContentCornerTopRight" class="tabContentCorner" />',
							'<span id="tabContentCornerBottomRight" class="tabContentCorner" />',
							'<span id="tabContentCornerBottomLeft" class="tabContentCorner" />',
							'<div id="plannerTabContent" class="tab-content">',
								'<div id="calendarWrapper">',
									'<div id="calendarControls" class="clearfix">',
										'<div id="calendarDateRange">',
											'<p id="calendarDates"></p>',
											'<a href="#" id="setDates">Change dates</a>',
										'</div>',
										'<div id="calendarControlsPrevious">',
											'<a href="#" id="previousWeek"><span class="button">&nbsp;</span><span class="accessibility">Previous </span>Week</a>',
											'<a href="#" id="previousDay"><span class="button"></span><span class="accessibility">Previous </span>Day</a>',
										'</div>',
										'<div id="calendarControlsNext">',
											'<a href="#" id="nextWeek"><span class="accessibility">Next </span>Week<span class="button"></span></a>',
											'<a href="#" id="nextDay"><span class="accessibility">Next </span>Day<span class="button"></span></a>',
										'</div>',
										'</div>',
										'<div id="calendar">',
											'<div id="calendarDays">',

											'</div>',
										'</div>',
								'</div>',
							'</div>',
							'<div id="mapTabContent" class="tab-content">',
									'<div class="mapContent">',
											'<div id="mapContainer"></div>',
											'<div id="mapDetails">',
													'<div id="mapFilters">',
															'<h3>Show this trip by...</h3>',
															'<div id="plannedDays">',
																	'<label for="numberPlannedDays">Planned days</label>',
																	'<select id="numberPlannedDays"></select>',
															'</div>',
															'<div id="plannedItems">',
																	'<h4>Planned items</h4>',
																	'<ul id="plannedItemsChecks">',
																			'<li><input type="checkbox" name="mapCategories" id="checkAccommodation" value="Accommodation" checked="true" /><label for="checkAccommodation">Accommodation</label></li>',
																			'<li><input type="checkbox" name="mapCategories" id="checkWhatsOn" value="Whats On" checked="true" /><label for="checkWhatsOn">What&#039;s on</label></li>',
																			'<li><input type="checkbox" name="mapCategories" id="checkActivities" value="Activities" checked="true" /><label for="checkActivities">Activities</label></li>',
																			'<li><input type="checkbox" name="mapCategories" id="checkFoodDrink" value="Food and Drink" checked="true" /><label for="checkFoodDrink">Food & drink</label></li>',
																			'<li><input type="checkbox" name="mapCategories" id="checkSightsCulture" value="Sights & Culture" checked="true" /><label for="checkSightsCulture">Sights & culture</label></li>',
																			'<li><input type="checkbox" name="mapCategories" id="checkGettingAround" value="Getting around Ireland" checked="true" /><label for="checkGettingAround">Getting around</label></li>',
																	'</ul>',
																	'<input type="checkbox" id="includeTripPlannerItems" /><label for="includeTripPlannerItems">Include my Trip Planner items</label>',
																	'<input type="image" src="/shared/resource/images/itinerary_planner/us/buttons/update-map.png" id="updateMap" />',
															'</div>',
													'</div>',
													'<div id="mapKey">',
															'<h3>Map key</h3>',
															'<ul class="key">',
																'<li><span class="accommodation"></span>Accommodation</li>',
																'<li><span class="whatsOn"></span>What&#039;s on</li>',
																'<li><span class="activities"></span>Activities</li>',
																'<li><span class="foodDrink"></span>Food & drink</li>',
																'<li><span class="sightsCulture"></span>Sights & culture</li>',
															'</ul>',
															'<ul class="iconType">',
																'<li><span class="tripDay"></span>Trip day number</li>',
																'<li><span class="addedToTrip"></span>Added to Trip</li>',
															'</ul>',
													'</div>',
											'</div>',
									'</div>',
							'</div>',
							'<div id="tripActions">',
								'<div id="shareTripEntry">',
									'<label for="shareTripInput" class="accessibility">Enter your friend&#039;s email address:</label>',
									'<input type="text" id="shareTripInput" value="Your friend&#039;s email address" />',
                					//'<input type="image" src="/shared/resource/images/itinerary_planner/us/buttons/share-trip.png" alt="Share trip" id="shareTripSubmit" value="" height="22" />',
									'<input type="image" class="dynamic" src="/shared/resource/images/itinerary_planner/us/buttons/add-comment.png" alt="Share trip" id="shareTripSubmit" value="" height="22" />',
								'</div>',
				'<img src="/shared/resource/images/itinerary_planner/us/buttons/save.png" alt="Save" height="22" id="saveTrip" ',
//              'onclick="dcsMultiTrack(\'DCS.dcsuri\', \''+ $.ti.makeSafeOnclickStr(window.location.pathname) +'save\', \'WT.ti\', \''+ $.ti.makeSafeOnclickStr(document.title) + ' - Planner Save\')" ',
                '/>',
				'<img src="/shared/resource/images/itinerary_planner/us/buttons/print.png" alt="Print" height="22" id="print" ',
//              'onclick="dcsMultiTrack(\'DCS.dcsuri\', \''+  $.ti.makeSafeOnclickStr(window.location.pathname) +'print\', \'WT.ti\', \''+  $.ti.makeSafeOnclickStr(document.title) + ' - Planner Print\')" ',
                ' />',
				'<img src="/shared/resource/images/itinerary_planner/us/buttons/enquire.png" alt="Enquire" height="22" id="enquire" ',
//              'onclick="dcsMultiTrack(\'DCS.dcsuri\', \''+  $.ti.makeSafeOnclickStr(window.location.pathname) +'enquire\', \'WT.ti\', \''+  $.ti.makeSafeOnclickStr(document.title) + ' - Planner Enquire\')" ',
                '/>',
				'<img src="/shared/resource/images/itinerary_planner/us/buttons/clear-all-items.png" alt="Clear all items" height="22" id="clearAllItems" />',
								'<p id="tripShareOverview">Let other people see this trip: <a href="#" rel="2" id="inspireOthers">Save and Inspire others</a></p>',
							'</div>',
						'</div>',
				'</div>',
				'<ul class="recommendations">',
					'<li class="get-inspired">',
						'<a href="#" id="plannerPromo1" class="plannerPromo plannerPromo1" title="">',
							'<span class="promoHeading">Be inspired!</span>',
							'<span class="promoText">Check out other people&#039;s trips to inspire yours</span>',
						'</a>',
					'</li>',
					'<li class="must-see">',
						'<a href="#" id="plannerPromo2" class="plannerPromo plannerPromo2" title="">',
							'<span class="promoHeading">What&#039;s on</span>',
							'<span class="promoText">Add brilliant festivals and events to your Trip Planner</span>',
						'</a>',
					'</li>',
				'</ul>',
		'</div>'
	].join('')),


	setUpContent: function() {
		this.html.appendTo("#panelContent");

		$('#tabs').tabs();
		$('#panel').hide();

		// Set up get new trip link
		$.ti.trips.getNewEvents();

		// Open date picker overlay
		$('#setDates').click(function(){
			$.ti.popup.init({
				content: $.ti.pickDates.html,
				callback: $.ti.pickDates.setUpPicker,
				width: '585px'
			});
		});

		$('#plannerTab').click(function() {
			$('#clearAllItems').show();
		});

		$('#mapTab').click(function(){
			$('#clearAllItems').hide();
			$.ti.createMap.setMapDayOptions();
			$.ti.createMap.createMap();
		});

		$('#updateMap').click(function() {
			$.ti.createMap.createMap();
		});

		$('#panelContent').bind("PANEL_OPENED", function(event) {
			$('#panel').fadeIn(500);
		});

		$('#panelContent').bind("PANEL_CLOSING", function(event) {
			$('#panel').fadeOut(500);
		});

		// Trip name changing
		$('#currentTripNameInput').bind({
			'blur': function(){
						$.ti.tripData.trip.tripName = $(this).val();
						$.ti.panelContent.setTripName();
					},
			'keydown': function(event){
						if(event.keyCode === 13) {
							$(this).blur();
						}
					}
		});


        $('#print').click(function() {
            $.ti.panelContent.checkUserStatus();
        });

	},

    checkUserStatus: function() {

        $.ti.ajax.postData('/us/trip/', $.ti.tripData);
        if ($.ti.tripData.trip.login)
        {
            $.ti.messages.printOptions(false);
        }
        else
        {
            $.ti.login.openDialogue();

            $.ti.login.afterLogin = function() {
                $.ti.messages.printOptions(true);
            };
        }
    },

	// Set up and event for the auto show on add checkbox
	showOnAdd: function() {
		$.ti.tripData.trip.showOnAdd === true? $('#showOnAdd').attr('checked', true) : $('#showOnAdd').attr('checked', false);
		$('#showOnAdd').bind('click.autoShow', function() {
			$('#showOnAdd').attr('checked')? $.ti.tripData.trip.showOnAdd = true: $.ti.tripData.trip.showOnAdd = false;
		});
	},

	// Set trip name
	setTripName: function() {
        $('#tripName').text($.ti.tripData.trip.tripName);
		$('#currentTripNameInput').val($.ti.tripData.trip.tripName);
		$('option[value="'+$.ti.tripData.trip.id+'"]', '#selectOtherTrips').text($.ti.tripData.trip.tripName);
		if (self.navigator.userAgent.indexOf('MSIE') > 0) $('#selectOtherTrips').attr('size',2).attr('size',1);
	},

	setShareCommentsOverview: function() {
		var commentsLink = '0 comments';

		if($.ti.tripData.trip.tripUsers) {
			// Logged in with friends sharing
			if($.ti.tripData.trip.tripUsers.user.length > 1) {
				// Set comment count
				if($.ti.tripData.trip.tripComments) {
					if($.ti.tripData.trip.tripComments.comment.length > 0) {
						commentsLink = $.ti.tripData.trip.tripComments.comment.length + ' comments';
					}
				}
				// ToDo - perhaps we should just use the presence of this rather than the object in panel.js for login detection?
				if($.ti.tripData.trip.login) {
					$('#tripShareOverview').replaceWith($('<p id="tripShareOverview">This trip is share with <a rel="0" id="shareTrip">' + ($.ti.tripData.trip.tripUsers.user.length -1) + ' friends</a> who have made <a rel="1" id="tripComments">' + commentsLink + '</a>. Let other people see this trip: <a rel="2" id="inspireOthers">Save and Inspire others</a>.'));

				this.setShareLinkEvents();
				}
			} else {
				//Logged in with no friends sharing
				this.setShareLinkEvents();
			}
		} else {
			// Not logged in

			$('#inspireOthers').unbind('click.loggedIn')
				.bind('click.notLoggedIn', function() {
					$.ti.login.openDialogue();
					$.ti.login.afterLogin = function() {
											$.ti.popup.swapContent($.ti.share.html, "600px", function(){
													$.ti.share.setTabs(2);
												});
											};

			});
			//this.setShareLinkEvents();
		}
	},

	setShareLinkEvents: function() {
		$('#inspireOthers').unbind('click.notLoggedIn');
		$('a', '#tripShareOverview').each(function() {
			$(this).bind('click.loggedIn', function(){
				$.ti.popup.init({
					content: $.ti.share.html,
					callback: $.ti.share.events,
					width: '600px'
				});
				// Create tabs
				$('#shareTabs', this.html).tabs({
					fx:{
						opacity: 'toggle',
						height: 'toggle'
					},
					selected: $(this).attr('rel')
				});
			});
		});
	}
};
})(jQuery);