{include_template_file file="blocks/account_left.html"}
<div class="account-right">
{if $mode == 'avatar_bg'}
	<h2 class="page-header">{lang code='Avatar &amp; Background'}</h2>
    <img src="{$userquery->getUserThumb($user)}" class="thumbnail moveL marginR10" />
    <form method="post" enctype="multipart/form-data" name="edit_profile" class="form-horizontal clearfix moveL">
    	<fieldset>
        	<div class="control-group">
            	<label class="control-label" for="avatar_file">{lang code='Avatar File'}</label>
                <div class="controls">
                	<input type="file" name="avatar_file" id="avatar_file"  />
                </div>
            </div>
            <input type="hidden" name="avatar_file_name" value="{$user.avatar}" />
        </fieldset>
        <div class="clear"></div>
        <fieldset class="fieldset">
<legend>{lang code='user_bg'}</legend>
<div style="height:15px;"></div>
<div style="float:left; width:200px;" align="center">
{if $userquery->getUserBg($user)}<img src="{$userquery->getUserBg($user)}" style="max-width:95px"/>{else}<em><strong>No Bg</strong></em>{/if}
</div>
<div style="width:300px; display:block; float:left">
<strong>{lang code='user_bg_img'}
  </strong><br />
  {lang code='please_select_img_file'}
  <br />
  <input type="file" name="background_file" id="background_file" />
  {lang code='or'}


  <label for="background_url">{lang code='pelase_enter_image_url'}<br /></label>
<input name="background_url" type="text" id="background_url" value="{$user.background_url}" />

{lang code='or'}
<label for="background_color">{lang code='please_enter_bg_color'}</label>
<input name="background_color" type="text" id="background_color" value="{$user.background_color}" />
<input type="hidden" name="bg_file_name" value="{$user.background}" />


<label for="background_repeat">{lang code='bg_repeat_type'}</label>
<select name="background_repeat" id="background_repeat" >
<option value="repeat" {if $user.background_repeat=='repeat'} selected="selected"{/if}>repeat</option>
<option value="repeat-x" {if $user.background_repeat=='repeat-x'} selected="selected"{/if}>repeat-x</option>
<option value="repeat-y" {if $user.background_repeat=='repeat-y'} selected="selected"{/if}>repeat-y</option>
<option value="no-repeat" {if $user.background_repeat=='no-repeat'} selected="selected"{/if}>no-repeat</option>
</select>
<br />

<input type="checkbox" {if $user.background_attachement=='yes'} checked="checked"{/if} value="yes" name="background_attachement" id="background_attachement" />
<label for="background_attachement" style="display:inline">{lang code='fix_bg'}</label>
{if $userquery->getUserBg($user)}<input name="delete_bg" type="checkbox" id="delete_bg" value="yes" /><label for="delete_bg" style="display:inline">{lang code='delete_this_img'}</label>{/if}
</div>

<div class="clearfix"></div>
</fieldset>
        <div>&nbsp;</div>
        <div class="well clearfix">
        	 <input type="submit" name="update_avatar_bg" class="btn btn-large btn-primary moveR" value="{lang code='Save Changes'}" />
        </div>
    </form>
{/if}

{if $mode == 'make_avatar'}
	<h2 class="page-header">Set Avatar</h2>
    {assign var=pd value=$photo.photo_details|json_decode}
    
    {if $smarty.get.set_avatar != 1}
    	<div class="well clearfix">
        	<h4 style="float:left;">Crop Photo<br /> <small>Drag the corners of the transparent box below to crop this photo into your avatar. </small></h4>
            <form action="" method="post" class="clearfix" style="margin:0px;">
                <input type="hidden" name="start_x" id ="start_x" value="0" />
                <input type="hidden" name="end_x" id ="end_x" value="{$Cbucket->configs.max_profile_pic_width}" />
                
                <input type="hidden" name="start_y" id="start_y" value="0" />
                <input type="hidden" name="end_y"id="end_y" value="{$Cbucket->configs.max_profile_pic_width}" />
                
                <input type="hidden" name="pid" value="{$smarty.get.pid}" />
                <button type="button" class="moveR btn btn-large" onclick="window.location = '{$cbphoto->photo_links($photo,view_photo)}'">Cancel</button>
                <input type="submit" name="set_avatar" class="btn btn-large btn-primary marginR10 moveR" value="Set Avatar" />
            </form>
        </div>
        <div id="preview_thumbnail_{$photo.photo_id}" class="thumbnail display-none" style="width:{$Cbucket->configs.max_profile_pic_width}px; height:{$Cbucket->configs.max_profile_pic_width}px; overflow:hidden; margin-bottom:15px; padding:0px;">
        	{get_photo details=$photo size="o" id="preview" style="max-width:none" output="html"}
        </div>
        <!-- Jcrop Start -->
		<script type="text/javascript">
			$(function() {
				function updateCoords ( coords ) {
		        var rx = {$Cbucket->configs.max_profile_pic_width} / coords.w;
				var ry = {$Cbucket->configs.max_profile_pic_width} / coords.h;
		
					$('#preview_{$photo.photo_id}').css({
						width: Math.round(rx * {$pd.l.width}) + 'px',
						height: Math.round(ry * {$pd.l.height}) + 'px',
						marginLeft: '-' + Math.round(rx * coords.x) + 'px',
						marginTop: '-' + Math.round(ry * coords.y) + 'px'
					});
		
					$('#start_x').val( coords.x );
					$('#end_x').val( coords.x2 );
		
					$('#start_y').val( coords.y );
					$('#end_y').val( coords.y2 );
				}
				
				$('#{$cbphoto->selector_id}_{$photo.photo_id}').Jcrop({
					onChange: updateCoords,
					onSelect: updateCoords,
					setSelect : [0,0,{$Cbucket->configs.max_profile_pic_width},{$Cbucket->configs.max_profile_pic_width}],
					aspectRatio : 1,
					minSize : [{$smarty.const.AVATAR_SMALL_SIZE},{$smarty.const.AVATAR_SMALL_SIZE}]					
				})
			})
		</script>      
        <!-- Jcrop End -->
    {/if}
    <div class="thumbnail" style="width:{$pd.l.width}px; margin:auto;">
    	{get_photo details=$photo size="l" output="html"}
    </div>
    
{/if}
</div>