//----------------------------------------------------------------------------------------------------------------------

var Helper = {
	
	//----------------------------------------------------------------------------------------------------------------------

	show: function( id, visible ) {
		var element = document.getElementById( id );
		if ( element == null ) {
			return;
		}
		
		var className = element.className;
		if ( className == null )
			className = "";
		
		if ( visible ) {
			className = className.replace( / ?hidden/, "" );
		} else {
			if ( className.indexOf( "hidden") == -1 ) {
				if ( className.length > 0 )
					className += " ";
				
				className += "hidden";	
			}					
		}

		element.className = className;  		
	},
	
	//----------------------------------------------------------------------------------------------------------------------

	activate: function( id, activated ) {
		var element = document.getElementById( id );
		if ( element == null ) {
			return;
		}

		var className = element.className;
		if ( className == null )
			className = "";
			 
		if ( !activated ) {
			className = className.replace( / ?activated/, "" );
		} else {
			if ( className.indexOf( "activated") == -1 ) {
				if ( className.length > 0 )
					className += " ";
				
				className += "activated";												
			}					
		}
		
		element.className = className;  		
	},
	
	//----------------------------------------------------------------------------------------------------------------------

	createTableHeader: function( title ) {
		return '<tr><th colspan="2">' + title + '</th></tr>';
	},
	
	//----------------------------------------------------------------------------------------------------------------------

	getUpdatesAvailableWidth: function() {
		// We need to set the width of the row so that long words or links don't
		// break our structure.
		var updatesWidth = Helper.getScreenSize().width;
		if ( Helper.isLargeScreen() ) {
			var menuWidth = Helper.isLandscape() ? 84 : 0; /* If we are in landscape take menu width away - wich is 84px with padding */
			updatesWidth = updatesWidth - 10 - menuWidth - 50; /* 10 is for status div padding, 50 for slider */
		} else {
			updatesWidth = updatesWidth - 10 - 50; /* 10 is for status div padding, 50 for slider */
		}

		return updatesWidth;
	},

	//----------------------------------------------------------------------------------------------------------------------

	getFriendsAvailableWidth: function() {
		// We need to set the width of the row so that long words or links don't
		// break our structure.
		var updatesWidth = Helper.getScreenSize().width;
		if ( Helper.isLargeScreen() ) {
			var menuWidth = Helper.isLandscape() ? 84 : 0; /* If we are in landscape take menu width away - wich is 84px with padding */
			updatesWidth = updatesWidth - 10 - menuWidth - 90 - 50; /* 10 is for status div padding , 90 for Invite button, 50 for slider */
		} else {
			updatesWidth = updatesWidth - 10 - 90 - 50; /* 10 is for status div padding, 90 for Invite button, 50 for slider */
		}

		return updatesWidth;
	},

	//----------------------------------------------------------------------------------------------------------------------

	createPeriodRow: function( name ) {
		
		var updatesWidth = Helper.getUpdatesAvailableWidth();
			
		var rowString = '<tr class="updateline_period">' +
						'<td class="updateline_content">' +
						'<div style="width: ' + updatesWidth + 'px;" class="status">' +
						'<img src="images/colapse.gif" border="0" width="14">' + 
						'<span class="name">' + name + '</span> ' +
						'</div>';
		rowString += '</td></tr>';
			
		return rowString;
	},

	//----------------------------------------------------------------------------------------------------------------------

	createUpdatesRow: function( from, from_name, body ) {

		var updatesWidth = Helper.getUpdatesAvailableWidth();
	
		var name = (from_name == "") ? from : from_name;

		var rowString = '<tr class="updateline">' +
						'<td class="updateline_content">' +
						'<div style="width: ' + updatesWidth + 'px;" class="status">' +
						'<span class="name">' + name + '</span> ' +
						body +
						'</div>';
		rowString += '</td></tr>';
			
		return rowString;
	},

	//----------------------------------------------------------------------------------------------------------------------

	createInboxRow: function( id, party, party_name, subject, v_date, is_read, flag ) {
	
		var updatesWidth = Helper.getUpdatesAvailableWidth();
	
		var name = (party_name == "") ? party : party_name;

		subject = (is_read == 1) ? subject : ("*** <b><i><u>" + subject + "</u></i></b>");

		var rowString  = '<tr class="updateline" onclick="inboxScreen.onMessageClick(' + id + ');">' +
						 '<td class="updateline_content">' +
						 '<div style="width: ' + updatesWidth + 'px;" class="status">';

		if(parseInt(flag) == 1)
			rowString += '<img src="images/flag.png" border="0" width="14">';

		rowString +=	 '<span class="name">' + name + '</span> ' +
						 subject +
						 '</div>';
		
		if ( v_date != null )
			rowString += '<div class="ago">' + v_date + '</div>';
		
		rowString += '</td></tr>';
			
		return rowString;
	},

	//----------------------------------------------------------------------------------------------------------------------

	createOutboxRow: function( id, party, party_name, subject, v_date, is_read, flag ) {
	
		var updatesWidth = Helper.getUpdatesAvailableWidth();
	
		var name = (party_name == "") ? party : party_name;

		subject = (is_read == 1) ? subject : ("<b>" + subject + "</b>");

		var rowString  = '<tr class="updateline" onclick="outboxScreen.onMessageClick(' + id + ');">' +
						 '<td class="updateline_content">' +
						 '<div style="width: ' + updatesWidth + 'px;" class="status">';

		if(parseInt(flag) == 1)
			rowString += '<img src="images/flag.png" border="0" width="14">';

		rowString +=	 '<span class="name">' + name + '</span> ' +
						 subject +
						 '</div>';
		
		if ( v_date != null )
			rowString += '<div class="ago">' + v_date + '</div>';
		
		rowString += '</td></tr>';
			
		return rowString;
	},

	//----------------------------------------------------------------------------------------------------------------------

	createViewMessage: function( party, party_name, subject, body, v_date, flag, show ) {
	
		var updatesWidth = Helper.getUpdatesAvailableWidth();
	
		var name = (party_name == "") ? party : party_name;

		var rowString  = '<tr class="updateline">' +
						 '<td class="updateline_content">' +
						 '<div style="width: ' + updatesWidth + 'px;" class="status">';

		if(parseInt(flag) == 1)
			rowString += '<img src="images/flag.png" border="0" width="14">';

		if(show == "outbox")
			rowString += ' To: <span class="name">' + name + '</span> ' +
						 '</div>';
		else
			rowString += ' From: <span class="name">' + name + '</span> ' +
						 '</div>';

		rowString +=	 '<div style="width: ' + updatesWidth + 'px;" class="status">' +
						 ' Subject: ' + subject +
						 '</div>';
		
		if ( v_date != null )
			rowString += '<div style="width: ' + updatesWidth + 'px;" class="status">' +
						 ' <div class="ago">' + v_date + '</div>' +
						 '</div>';

		rowString += '</td></tr>';

		rowString += '<tr class="updateline">' +
					 '<td class="updateline_content">' +
					 '<div style="width: ' + updatesWidth + 'px;" class="status">' +
					 body +
					 '</div>' + 
					 '</td></tr>';
		
		return rowString;
	},

	//----------------------------------------------------------------------------------------------------------------------

	createFriendRow: function( id, username, name ) {

		var friendsWidth = Helper.getFriendsAvailableWidth();

		var rowString = '<tr class="updateline">' +
						'<td class="button_container"><a id="invite_button_' + id + '" class="button" href="#" onclick="inviteFriendsScreen.onInviteClicked(' + id + ');">' + StringTable.Code.inviteFriendsInviteButton + '</a></td>' +
						'<td class="updateline_content">' +
						'<div style="width: ' + friendsWidth + 'px;" class="status">' +
						'<span class="name">' + username + '</span> ';
		if(name != "")
			rowString += "(<i>" + name + "</i>)";
		rowString +=	'</div>';
		rowString +=	'</td></tr>';
			
		return rowString;
	},

	//----------------------------------------------------------------------------------------------------------------------

	gameOptionsCount: function(o1, o2, o3, o4, o5) {
		var count_t = 0;
		if(o1 != "") count_t++;
		if(o2 != "") count_t++;
		if(o3 != "") count_t++;
		if(o4 != "") count_t++;
		if(o5 != "") count_t++;
		return count_t;
	},

	//----------------------------------------------------------------------------------------------------------------------

	trim: function(str) {
		var a = str.replace(/^\s+/, '');
		return a.replace(/\s+$/, '');
	},

	//----------------------------------------------------------------------------------------------------------------------

	getScreenSize: function() {
		var height = window.innerHeight;
		var width = window.innerWidth;
			
		return {
			width: width,
			height: height
		};
	},

	//----------------------------------------------------------------------------------------------------------------------

	isLandscape: function() {
		var size = this.getScreenSize();
		return ( size.width > size.height );	
	},

	//----------------------------------------------------------------------------------------------------------------------

	isLargeScreen: function() {
		var size = this.getScreenSize();
		return ( size.height > Helper.SMALL_SCREEN_TRESHOLD );
	},
	
	//----------------------------------------------------------------------------------------------------------------------

	applyCorrectStyles: function() {
		var largeScreen = Helper.isLargeScreen();
		
		document.styleSheets[0].disabled = !largeScreen;
		document.styleSheets[1].disabled = largeScreen;
	},
	
	//----------------------------------------------------------------------------------------------------------------------

	isMiniViewMode: function() {
		var size = this.getScreenSize();
		return ( size.height < Helper.MINI_VIEW_TRESHOLD );
	},
	
	//----------------------------------------------------------------------------------------------------------------------

	handleCustomControlClick: function( control ) {
		control.parentNode.className = control.checked ? "checked" : "";
	},

	//----------------------------------------------------------------------------------------------------------------------

	activateHomeScreen: function() {

		// Check which page is the startup page.
		var startupPage = widget.preferenceForKey( SettingsScreen.KEY_STARTUP_PAGE );
		 
		if ( startupPage == SettingsScreen.NEWGAME_PAGE ) 
			widgetMenu.activate( Menu.NEWGAME_SCREEN );
		else if ( startupPage == SettingsScreen.INBOX_PAGE ) 
			widgetMenu.activate( Menu.INBOX_SCREEN );
		else if ( startupPage == SettingsScreen.OUTBOX_PAGE ) 
			widgetMenu.activate( Menu.OUTBOX_SCREEN );
		else
			widgetMenu.activate( Menu.UPDATES_SCREEN );
	}
	
}

//----------------------------------------------------------------------------------------------------------------------

Helper.SMALL_SCREEN_TRESHOLD = 190; //320 - 20 - 60 - 44
Helper.MINI_VIEW_TRESHOLD = 150;

//----------------------------------------------------------------------------------------------------------------------