/*
* 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" />',
						'Kalenderansicht jedes Mal anzeigen, wenn ein Eintrag in die Aufgabenliste eingef&uuml;gt wird</label>',
					'</div>',
					'<div id="currentTripName">',
						'<label for="currentTripNameInput" class="accessibility">Aktueller Reisename</label>',
						'<input type="text" id="currentTripNameInput" value="" />',
					'</div>',
				    '<div id="otherTrips">',
						'<a href="#" id="createNewTrip" class="call-to-action">Neue Reise planen</a>',
				    '</div>',
					'<a href="/de/tripplannerhelp" target="_blank" id="help">So geht&#39;s </a>',
					'<div id="tabs">',
						'<ul class="tabs">',
							'<li><a href="#plannerTabContent" id="plannerTab">Reiseplaner</a></li>',
							'<li><a href="#mapTabContent" id="mapTab">Karten</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">Reisedatum &auml;ndern</a>',
										'</div>',
										'<div id="calendarControlsPrevious">',
											'<a href="#" id="previousWeek"><span class="button">&nbsp;</span><span class="accessibility">Vorherige(r) </span>Woche</a>',
											'<a href="#" id="previousDay"><span class="button"></span><span class="accessibility">Vorherige(r) </span>Tag</a>',
										'</div>',
										'<div id="calendarControlsNext">',
											'<a href="#" id="nextWeek"><span class="accessibility">N&auml;chste(r) </span>Woche<span class="button"></span></a>',
											'<a href="#" id="nextDay"><span class="accessibility">N&auml;chste(r) </span>Tag<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>die Reise sortieren nach...</h3>',
															'<div id="plannedDays">',
																	'<label for="numberPlannedDays">Geplante Tage</label>',
																	'<select id="numberPlannedDays"></select>',
															'</div>',
															'<div id="plannedItems">',
																	'<h4>Geplante Eintr&auml;ge</h4>',
																	'<ul id="plannedItemsChecks">',
																			'<li><input type="checkbox" name="mapCategories" id="checkAccommodation" value="Accommodation" checked="true" /><label for="checkAccommodation">Unterkunft</label></li>',
																			'<li><input type="checkbox" name="mapCategories" id="checkWhatsOn" value="Whats On" checked="true" /><label for="checkWhatsOn">Veranstaltungen</label></li>',
																			'<li><input type="checkbox" name="mapCategories" id="checkActivities" value="Activities" checked="true" /><label for="checkActivities">Aktivit&auml;ten</label></li>',
																			'<li><input type="checkbox" name="mapCategories" id="checkFoodDrink" value="Food and Drink" checked="true" /><label for="checkFoodDrink">Essen & Trinken</label></li>',
																			'<li><input type="checkbox" name="mapCategories" id="checkSightsCulture" value="Sights & Culture" checked="true" /><label for="checkSightsCulture">Kultur</label></li>',
																			'<li><input type="checkbox" name="mapCategories" id="checkGettingAround" value="Getting around Ireland" checked="true" /><label for="checkGettingAround">Reisen im Land</label></li>',
																	'</ul>',
																	'<input type="checkbox" id="includeTripPlannerItems" /><label for="includeTripPlannerItems">Meine Reiseplaner Eintr&auml;ge einf&uuml;gen</label>',
																	'<input type="image" src="/shared/resource/images/itinerary_planner/de/buttons/update-map.png" id="updateMap" />',
															'</div>',
													'</div>',
													'<div id="mapKey">',
															'<h3>Kartenlegende</h3>',
															'<ul class="key">',
																'<li><span class="accommodation"></span>Unterkunft</li>',
																'<li><span class="whatsOn"></span>Veranstaltungen</li>',
																'<li><span class="activities"></span>Aktivit&auml;ten</li>',
																'<li><span class="foodDrink"></span>Essen & Trinken</li>',
																'<li><span class="sightsCulture"></span>Kultur</li>',
															'</ul>',
															'<ul class="iconType">',
																'<li><span class="tripDay"></span>Reisetag</li>',
																'<li><span class="addedToTrip"></span>Zur Reise hinzugef&uuml;gt</li>',
															'</ul>',
													'</div>',
											'</div>',
									'</div>',
							'</div>',
							'<div id="tripActions">',
								'<div id="shareTripEntry">',
									'<label for="shareTripInput" class="accessibility">Geben Sie die E-Mail-Adresse des Freundes ein:</label>',
									'<input type="text" id="shareTripInput" value="E-Mail-Adresse des Freundes" />',
                					//'<input type="image" src="/shared/resource/images/itinerary_planner/de/buttons/share-trip.png" alt="Share trip" id="shareTripSubmit" value="" height="22" />',
									'<input type="image" class="dynamic" src="/shared/resource/images/itinerary_planner/de/buttons/add-comment.png" alt="Share trip" id="shareTripSubmit" value="" height="22" />',
								'</div>',
				'<img src="/shared/resource/images/itinerary_planner/de/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/de/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/de/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/de/buttons/clear-all-items.png" alt="Clear all items" height="22" id="clearAllItems" />',
								'<p id="tripShareOverview">Geben Sie die Reise f&uuml;r andere Leute frei: <a href="#" rel="2" id="inspireOthers">Speichern und andere inspirieren</a></p>',
							'</div>',
						'</div>',
				'</div>',
				'<ul class="recommendations">',
					'<li class="get-inspired">',
						'<a href="#" id="plannerPromo1" class="plannerPromo plannerPromo1" title="">',
							'<span class="promoHeading">Lassen Sie sich inspirieren!</span>',
							'<span class="promoText">Lesen Sie die Erfahrungen Anderer und sammeln Sie Anregungen.</span>',
						'</a>',
					'</li>',
					'<li class="must-see">',
						'<a href="#" id="plannerPromo2" class="plannerPromo plannerPromo2" title="">',
							'<span class="promoHeading">Nicht verpassen! </span>',
							'<span class="promoText">Finden Sie heraus, was in Irland los ist.</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('/de/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">Diese Reise ist freigegeben f&uuml;r <a rel="0" id="shareTrip">' + ($.ti.tripData.trip.tripUsers.user.length -1) + ' Freunde</a> ???? <a rel="1" id="tripComments">' + commentsLink + '</a>. Geben Sie die Reise f&uuml;r andere Leute frei: <a rel="2" id="inspireOthers">Speichern und andere inspirieren</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);