images.tpl

<style>
  #images .flat_tabs{
    margin:-25px -15px 0px;
  }
  .flat_tabs{
    position:relative;
    height:50px;  
    line-height:50px;
    clear:both;
    background:#ccc;
    font-size:14px;
    border-bottom:1px solid #999;
    -moz-box-shadow: inset 5px 8px 15px -6px #999;
    -webkit-box-shadow: inset 5px 8px 15px -6px #999;
    box-shadow: inset 5px 8px 15px -6px #999;
  }

  .flat_tabs li{
    height:100%;
    float:left;
    position:relative;
  }

  .flat_tabs li a{
    font-family: Verdana, Lucida Grande, sans-serif;
    color:#333;
    text-decoration:none;
    height:100%;
    left:0px;
    top:0px;
    position:relative;
    display:block;
    padding:0px 20px;
  }

  .flat_tabs li.current{
    background:#fff;
    border:1px solid #999;
    border-bottom:1px solid #fff;
    border-top:none;

    -moz-box-shadow:  8px -1px 8px -4px #999;
    -webkit-box-shadow:  8px -1px 8px -4px #999;
    box-shadow:  8px -1px 8px -4px #999;
  }

  .flat_tabs li:first-child {
    border-left:none;
  }

  .flat_tabs li:not(.current) a {
    color:#666;
  }

  .flat_tabs li:not(.current) a:hover {
    color:#000;
  }

  #add_image_link{
    display:block;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
  }

  #add_image_area{
    display:none;
    background:#ccc;
    padding:30px;
    -moz-box-shadow:inset 5px 5px 15px #999;
    -webkit-box-shadow:inset 5px 5px 15px #999;
    box-shadow:inset 5px 5px 15px #999;
  }

  #add_image_area > *{
    margin-bottom:20px;
  }

  #lib{
    margin-top:20px;
  }

  #images{
    text-align:left;
  }
  #images > div > div{
    border-radius:0px 0px 10px 10px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-radius:0px 0px 10px 10px;
  }
  
  #cropArea {
    display:none;
    min-width:0px;
    
  }

  #imageupload p{
    height:30px;
    line-height:30px;
    margin-left:20px;
  }
  #imageupload > *{
    float:left;
  }
</style>

<script>
  // Select current image
  (function(){
    var current_src = $('.edit.current img').attr('src');
    current_src = current_src.substr( current_src.lastIndexOf('/') +1 );

    $('#lib li div img').each(function(){
        console.log(current_src, $(this).attr('alt'));
        if( $(this).attr('alt') == current_src ){
            var li = $(this).closest('li');
            li.addClass('current');
            li.find('input[type=radio]').trigger('click');
        }
    });
  })();

  // flat tabs code
  (function(){
    $('.flat_tabs a').click(function(){
      console.log(this);
      var tab_to_show = $(this).attr('href')

      $('.flat_tabs li.current').removeClass('current');
      $(this).closest('li').addClass('current');

      $('.tab_body').hide();
      $(tab_to_show).show();

      return false
    });

    $('.tab_body').hide();
    $('.flat_tabs a').eq(0).trigger('click');
  })();

  // Toggle code
  (function(){
    $('.toggle').each(function(){
      var $this = $(this);
      var linked_el = $this.attr('href');
      linked_el = $(linked_el);

      $this.click(function(){
        // Type of toggle
        if( $this.hasClass('slide') ){
          linked_el.stop(true,true).slideToggle(); 
        }else{
          linked_el.toggle();
        }

        return false;
      });
    });
  })();

  {literal}
  // Add image link should reset contents of add image area
  $('#add_image_link').click(function(){
      $('#crop').imgAreaSelect({remove: true});
      $('#add_image_area #cropArea').html('');
      $('#add_image_area .upload_area').show();
  });
  {/literal}

  // Link chooser combobox
  (function(){
    $('#link').combobox();

    // set the starting value to the current link value
    var current_link = $('.edit.current a').attr('href');
    console.log(current_link);
    console.log($('#link_combobox_value'))
    $('#link_combobox').val(current_link);
  })();

</script>

<div id="images">
    <ul class="flat_tabs">
        <li><a href="#image_info">Image</a></li>
        <li><a href="#link_info">Link</a></li>
    </ul>

    <div class="tab_body" id="image_info">
        <!-- Add Image -->
        <a id="add_image_link" href="#add_image_area" class="toggle slide">Add Image</a> 
        <div id="add_image_area">
          <div class="clearfix upload_area">
            <div id="imageupload">
              <!-- button text set in common.js - Upload an image -->
              <input type="file" id="imageuploader" /> 
              <p class="clipboard_compat">Or press ctrl+V to paste an image from your clipboard.</p>
            </div>
          </div>

          <div class="clipboard_compat" id="cropArea">
          </div>
          
          <!-- Crop Button -->
          <div class="right">
            <a href="#null" id="cancel_crop" style="" class="btn small blue">Cancel</a>
            <a href="#cropArea" style="display: none;" class="btn small blue cropLink" title="Crop Image">Crop Image</a>
          </div>

        </div>

        <!-- Image Library -->
        <h2>Choose an image</h2>
        <div id="lib" class="clearfix">
            <ul>
                {foreach item=i from=$images}
                    <li>
                        <div><img width="100" height="100" src="/front/uploads/images/small_{$i.name}" alt="{$i.name}" data-id="{$i.id}"/></div>
                        <p class="actions">
                            <a href="#crop" title="Crop image" class="crop"><img src="/front/images/editor/crop.png" /></a>
                            <a href="/ajax/globe/delete/tbl/i/id/{$i.id}/" class="delete" data-action="delete" data-item="i" data-remove="li" title="Delete image"><img src="/front/images/editor/cross.png" /></a>
                        </p>
                        <p class="radio">
                            <input type="radio" name="image" value="{$i.name}" />
                        </p>
                    </li>
                {/foreach}
            </ul>
        </div>
        <div class="clear"></div>
    </div>

    <!-- Link -->
    <div class="tab_body" id="link_info">
      <h2>Select a link or enter a custom value:</h2>
      
      <div>
        <select id="link">
          {foreach item=l from=$links name=links}
            <option value="{$l.url}">{$l.title} ({$l.url})</option>
          {/foreach}
        </select>
      </div>


    </div>

    <!-- Finish Button -->
    <div class="right" id="finish">
      <a href="#pick" class="btn large blue choose" title="Finish">Finish</a>
    </div>

    <!--<div id="tabs" class="btn-toolbar left">
        <a href="#lib" class="btn large black" title="Image Library">Image Library</a>
        <a href="#upload" class="btn large black" title="Upload">Upload</a>
    </div>
    <div class="right">
    </div> -->
</div>
<script type="text/javascript" src="/front/js/editor/screenshot.js"></script>
<script type="text/javascript">
    {literal}
    jQuery.fn.center = function() {
        var top = -this.height() / 2;
        var left = -this.width() / 2;
        return this.css('position', 'absolute').css({ 'margin-left': left + 'px', 'margin-top': top + 'px', 'left': '50%', 'top': '50%' });
    }
    $(document).ready(function() {
        var cd = {
            x : 0,
            y : 0,
            width : 0,
            height : 0
        };
        var imageObject;
        var clipboard = false;
        $.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());    
        if($.browser.chrome) $('.clipboard_compat').show();

        // cancel button
        $('#cancel_crop').click(function(){
            $('#add_image_link').trigger('click');
        });

        $("#lib li").live('click', function() {
            $("#lib li").removeClass('current');
            $(this).addClass('current');
            $(this).find('input').attr('checked', true);
        });
        /*$("#tabs a").live('click', function() {
            $("#lib, #upload, #cropArea").hide();
            pick = $(this).attr('href');
            $(pick).show();
            if(pick != '#lib')
                $('.choose').hide();
            else
                $('.choose').show();
            $('.cropLink').hide();
            $('#crop').imgAreaSelect({remove: true});
            return false;
        });*/
        $('.choose').live('click',function() {
          // save link
          (function(){
                /* This code looks mental.
                 * The combobox we are using is a strange hacked together jquery plugin.
                 * To call it's change event, we must get a reference to the combobox's
                 * inner autocomplete plugin and then call change with a reference to itself
                 * (to be used when it calls 'this')
                 * At least it works...
                 */
                var autocomplete = $('#link_combobox').autocomplete();
                autocomplete.autocomplete('option','change').call(autocomplete);

                var val = $('#link_combobox_value').val();
                changeProperty('link', val); 
            })();

            var img = $('#lib .current div img');
            if(img.length == 0) {
                $.msgGrowl ({
                    type: 'warning',
                    title: 'Attention',
                    text: 'Please select an image you want to add to your editor.'
                });            
            } else {
                var image = $('<img src="/front/uploads/images/'+img.attr('alt')+'" />');
                $('.edit.current a').html(image);

                // resize parent edit to size of image
                image.load(function(){
                  var parent_edit = image.closest('.edit');
                  parent_edit.width( image.width() );
                  parent_edit.height( image.height() );
                  $.modal.close();
                });
            }
        });
       $("html").pasteImageReader(function(results) {
            $('.cropLink').show();
            $("#cropArea").show().html('<img width="520" src="'+results.dataURL+'" id="crop"/>');
            clipboard = true;
            var the_image = new Image();
            the_image.src = results.dataURL;
            $('#crop').imgAreaSelect({
                handles: true, 
                imageWidth : the_image.width,
                imageHeight : the_image.height,
                onSelectEnd: function (img, selection) {
                    cd.x = selection.x1;
                    cd.y = selection.y1;
                    cd.width = selection.width;
                    cd.height = selection.height;
                }
            });
        });
        var imageObject;
        $('.crop').live('click',function() {
            var actual_width, actual_height;
            imageObject = $(this).parents('li').find('div img');
            var image = $('<img src="/front/uploads/images/'+imageObject.attr('alt')+'" id="crop" />')
                .load(function(){ // we need to know actual width and height if we want to crop a resized image
                    actual_width = this.width;
                    actual_height = this.height;

                    console.log(actual_width,actual_height);
                    $('#cropArea').html($(this).width(520));
                }
            );

            $('.upload_area').hide();
            $('#add_image_area').stop(true,true).slideDown();
            image.load(function(){
                $('#crop').imgAreaSelect({
                    handles: true, 
                    imageWidth : actual_width,
                    imageHeight : actual_height,
                    onSelectEnd: function (img, selection) {
                        cd.x = selection.x1;
                        cd.y = selection.y1;
                        cd.width = selection.width;
                        cd.height = selection.height;
                        $('.cropLink').show();
                    }
                });
            });
            $("#modal").center();
            clipboard = false;
            //$("#modal").css('left','50%');
        });
            function cropCallback(img) {
                $.addToGallery(jQuery.parseJSON(img));
                $.loading(false,'');
                delete cd.x;
                delete cd.y;
                delete cd.width;
                delete cd.height;

                $('#add_image_link').trigger('click');
            }
        $('.cropLink').live('click',function() {
            $(this).hide();
            $.loading(true,'Cropping image');
            if(clipboard) {
                $.post('/editor/ajax/crop/id/'+id+'/x/'+cd.x+'/y/'+cd.y+'/width/'+cd.width+'/height/'+cd.height,
                    {'image': $("#crop").attr('src')},
                    function(data) { cropCallback(data); }
                );
            } else {
                imageID = imageObject.data().id;
                $.get('/editor/ajax/crop/id/'+id+'/i/'+imageID+'/x/'+cd.x+'/y/'+cd.y+'/width/'+cd.width+'/height/'+cd.height,
                    function(data) { cropCallback(data); }
                );
            }
        });
    });
    {/literal}
</script>