<ensure variable="get.action" value="">

<ensure variable="get.color" value="">








<!---
colors: foreground, background
--->
<var _color_test = "">
<var _color_test = _color_test & get.color><var get.color = colorNameToHex(get.color)>
<if get.action EQ "color" OR _color_test EQ "">

<h3>Mobile App Builder</h3>

<form method="get" enctype="application/x-www-urlencoded">
<input type="hidden" style="display:none;" name="x" value="">

<var _pw = 84>

<div style="margin-left:1em;">
<div style="float:left; width:#_pw#px;">
<!---<tag.profile_pic for="#client_id#" append="#GLOBAL.Def.Client.so_lastupdated#" picwith="#_pw#">--->
<img src="http://#this_domain#/file:/image-sp_phone?&picwidth=#_pw#" border="0">
</div>
<div style="margin-left:#_pw+8#px; padding-top:7px;">
<div><b>Choose a Color:</b></div>
<div style="margin-left:1em; padding:3px;">
<select name="color" id="1_color" style="border-width:2px; border-color:<if get.color NEQ "">#get.color#<else>#colorNameToHex('blue')#</if>">
<loop list="Blue,Green,Indigo,Purple,Red,Orange,Pink,Yellow,Black,Navy,Grey" index="x">
<var _hex = colorNameToHex(x)>
<option value="#_hex#"<if x EQ "blue" OR get.color EQ _hex> selected</if>>#x#</option>
</loop>
</select>
<div style="margin-top:0.2em;"><small>
This color will be used for links, borders, and other highlights.
<p>
Later, you can customize your app's main color
and add a background color.
</p>
</small></div>
</div>
<div>&nbsp;</div>

<div>&nbsp;</div>
<div class="pagebtn" align="center">
<input type="submit" value="Save &amp; Continue" style="cursor:pointer;" class="button">
</div>
<div>&nbsp;</div>
</div>
</div>

</form>

<tag.jquery>
<script type="text/javascript">
$(document).ready(function() {
$('##1_color').change(function() {
var _hex = $(this).val();
$(this).css('border-color',_hex);
$('.sp_body').css('border-color',_hex);
$('.sp_tab_active').css('background',_hex);
$('.sp_tabs').css('border-color',_hex);
$('##site_body,##site_foot').css('border-color',_hex);
$('a').css('color',_hex);
$('.color_example').css('padding','1px');
$('.color_example').css('background','white');
});
$('##1_color').focus();
});
</script>

<break>

</if>





<!---
Last step - gutitle!
--->
<postform>

<var it_worked = 0>
<if isdefined("POST.new_gutitle")>
<if isValidGutitle(POST.new_gutitle) EQ 1>
<var _v = trim(lcase(POST.new_gutitle))>
<var _meta = '<ta' & 'g.sp_meta>'>

<if trim(get.color) EQ "" OR get.color EQ "##">
<var get.color = "blue">
</if>

<insert orb="site"
gutitle="#_v#"
user_key_id="1"
soloroutineid_unsignedint="4088"
generator="smaller"
color="#get.color#"
bgcolor="##eaeaea"
sp_edit_datetime="#now()#"
homepagepref="latest_page">
<var idnum = return>

<if isNumeric(idnum) AND idnum GT 1>
<!--- update user's site count --->
<var _site_count = GLOBAL.Def.Client_Sites.recordcount + 1>
<update orb="user" where="user.id = #client_id#"
spsitecount_unsignedint="#_site_count#">
<!--- "new site" bulliten --->
<tag.bull
j='/site-#idnum#'
title='#client_name# - New SmallerPage App'
body='<a href="/#client_id#">#escapeMarkup(client_name)#</a> made an app called <a href="/j:/site-#idnum#">#_v#</a>'
type='new_site'>
<!--- email the client --->
<if client_email NEQ "">
<var _new_url = "http://#_v#.smallerpage.com/">
<var _name = "SmallerPage User">
<if trim(client_name) NEQ "">
<var _name = escapeMarkup(client_name)>
</if>
<!--- general site email --->
<email from="aRobot@smallerpage.com" to="#client_email#" bcc="steve@fentriss.com" subject="Your SmallerPage App">Hello #_name#,

Congratulations - you are now the proud owner of a new SmallerPage app called "#_v#".

Here is a link to your app on SmallerPage:
#_new_url#

You can share your app with others by sending them this link.

You can also add unlimited pages to your app.

Adding pages is easy - simply log into SmallerPage and use the "Add a Page" box.

Here is a link to SmallerPage:
http://smallerpage.com/

Enjoy!
- SmallerPage Email Robot

--</email>
</if>
<var it_worked = 1>
<if isDefined("att.rdr") AND att.rdr NEQ "">
<var _url = att.rdr>
<else>
<var _url = "http://#_v#.smallerpage.com/?&site_created=1"><!--- &soTransfer=#urlEncodedFormat(client_cookie)# --->
</if>
<goto url="#_url#">
</if>

</if>
</if>
<if it_worked NEQ 1>

<!--- sofar... --->
<div><small><small>
<p>
<tag.fico i="tick" linkback="off" style="height:1em;"> <b>Main Color:</b> <span style="display:inline-block; background:#get.color#;">&nbsp; #hexToColorName(get.color)# &nbsp;</span>
&nbsp;(<a href="http://#this_domain#/#so_slash_string#">change</a>)
</p>
</small></small></div>

<if isdefined("POST.new_gutitle")>
<div>&nbsp;</div>
<h3>Invalid URL</h3>
<p>
The SmallerPage URL you entered has invalid characters,
or is already in use. Please try again.
</p>
<else>
<div>&nbsp;</div>
</if>

<div>&nbsp;</div>

<div style="margin-left:1em;">
<div class="unit" style="position:relative;">
<div><b>Name Your App:</b></div>
<div style="padding:3px; padding-top:7px; margin-left:1em;">
<div id="append_okbtn_here"><input name="new_gutitle" id="site-0:gutitle" class="gutitle_field" style="font-size:1em; display:inline; width:7em; padding:2px;" autocomplete="off">.smallerpage.com</div>
<div style="padding-top:3px;"><small>
Type only letters and underscores.
<br>Example: <b>my_name</b>.smallerpage.com
</small></div>
</div>
</div>
<div>&nbsp;</div>

<div class="pagebtn" align="center" style="min-height:3em;">
<input type="submit" value="Create SmallerPage App" style="cursor:pointer;" class="button">
</div>
</div>
<div>&nbsp;</div>

</if>

</postform>


<tag.jquery>
<script type="text/javascript">
$(document).ready(function() {

gutitle_fields();

});
function gutitle_fields() {
$('.gutitle_field').each(function() {
$(this).val('');
$('.pagebtn').find('.button').hide();
$('##append_okbtn_here').append(' &nbsp;<button style="font-size:0.86em; cursor:pointer; border:1px solid ##ccc;" onclick="return false;" class="okbutton">Ok</button>');
$('.okbutton').show();
var str = this.id;
var split_1 = str.split(':');
var split_2 = split_1[0].split('-');
var otype = split_2[0];
var idnum = split_2[1];
this.otype = otype;
this.idnum = idnum;
var pNode = $(this).parents()[0];
this.pNode = pNode;
this.thinker = document.createElement('div');
this.thinker.id = this.id + ':thinker';
this.thinker.style.position = 'absolute';
this.thinker.style.right = '5px';
this.thinker.style.top = '-30px';
this.thinker.style.zIndex = '10';
this.thinker.style.display = 'none';
this.thinker.style.padding = '10px';
this.thinker.style.marginTop = '5px';
this.thinker.innerHTML = '<tag.smp_loader_gif>';
this.good = document.createElement('div');
this.good.id = this.id + ':good';
this.good.style.position = 'absolute';
this.good.style.right = '5px';
this.good.style.top = '-30px';
this.good.style.zIndex = '10';
this.good.style.display = 'none';
this.good.style.padding = '10px';
this.good.style.marginTop = '5px';
this.good.style.background = '##fff777';
this.good.innerHTML = '<b>It\'s Available!</b>';
this.tick = document.createElement('div');
this.tick.id = this.id + ':tick';
this.tick.style.position = 'absolute';
this.tick.style.right = '5px';
this.tick.style.zIndex = '10';
this.tick.style.display = 'none';
this.tick.style.padding = '10px';
this.tick.style.marginTop = '5px';
this.tick.style.background = '##fff777';
this.tick.innerHTML = '<tag.fico i="tick" linkback="off" style="height:1em;">';
this.bad = document.createElement('div');
this.bad.id = this.id + ':bad';
this.bad.style.position = 'absolute';
this.bad.style.right = '5px';
this.bad.style.top = '-30px';
this.bad.style.zIndex = '10';
this.bad.style.display = 'none';
this.bad.style.padding = '10px';
this.bad.style.marginTop = '5px';
this.bad.style.color = '##800000';
this.bad.style.background = 'white';
this.bad.innerHTML = '<b>Unavailable - try another.</b>';
this.pNode.appendChild(this.thinker);
this.pNode.appendChild(this.good);
this.pNode.appendChild(this.tick);
this.pNode.appendChild(this.bad);
this.old_value = this.value;
this.fail = function() {
$(this.tick).hide();
$(this).css('background','##800000');
$(this).css('color','white');
$(this.good).hide();
$(this.bad).slideDown(240);
setTimeout("document.getElementById('" + this.id + "').hide_fail()",1800);
$('.pagebtn').find('.button').hide();
$('.okbutton').show();
$(this).select();
}
this.hide_fail = function() {
$(this.bad).slideUp(240);
}
this.success = function() {
$(this.bad).hide();
$(this.good).slideDown(240);
setTimeout("document.getElementById('" + this.id + "').hide_success()",1800);
$('.pagebtn').find('.button').show();
$('.okbutton').hide();
$('.pagebtn').find('.button').focus();
}
this.hide_success = function() {
$(this.good).slideUp(240);
$(this.tick).fadeIn(180);
}
$(this).keydown(function(e) {
$(this).css('background','');
$(this).css('color','');
$(this.tick).hide();
if (e.keyCode == 13) {
setTimeout("$(document.getElementById('" + this.id + "')).blur()",100);
return false;
}
});
$(this).keyup(function() { // validate
if (this.value.search(/[^a-z_]/i) > -1) {
this.value = this.value.replace(/[^a-z_]+/gi,'');
}
if (this.value.indexOf('__') > -1) {
this.value = this.value.replace(/[_]+/gi,'_');
}
if (jQuery.trim($(this).val()) == '') {
$('.pagebtn').find('.button').hide();
$('.okbutton').show();
}
// begin/end underscores are dealt with on "enter"
});
$(this).focus(function() {
$(this).css('background','');
$(this).css('color','');
$(this.tick).hide();
});
$(this).blur(function() {
if (this.value.indexOf('_') == 0) {
this.value = this.value.replace('_','');
}
if (this.value.substr(this.value.length-1,1) == '_') {
this.value = this.value.substr(0,this.value.length-1);
}
var str = jQuery.trim(this.value);
if (str !== '') {
if (str == this.old_value) { return true; }
$(this.tick).hide();
$(this).css('background','');
$(this).css('color','');
this.old_value = this.value;
$(this).select();
$(this.thinker).slideDown(240);
$(this.bad).hide();
$(this.good).hide();
var qstring = 'http://' + document.domain + '/?';
var qstring = qstring + '&rando=' + Math.random();
$.get(qstring,
{
check_gutitle:1,
gutitle:str,
orb:this.otype,
'id':this.idnum,
elId:this.id
},
function(data) {
// i put the element id at the end of the url.
var _split = this.url.split('=');
var elId = decodeURIComponent(_split[_split.length-1]);
var that = document.getElementById(elId);
$(that.thinker).slideUp(240);
if (data.toString() !== '1') {
that.fail();
}
else {
that.success();
}
}
,"text","abcdefg");
}
});
$(this).select();
});
}
</script>