f = function() {
           $(this).css("zIndex", "900");
           //console.info(this);
           $(this).animate({height: 150, width: 50},100);
           $(this).find('.scroll-container').fadeIn(200);

     };
     $.fn.g =  function() {
            $(this).css("zIndex", "100");
           $(this).animate({height: 36, width: 36},100);


           $(this).find('.scroll-container').fadeOut();
           //console.info( this );
        };

var ocontent;
var spaceToScroll;
var ocontainer;
$(document).ready( function() {
        var handle = $('.scroll-handle');
        //hover action for handle
        $(handle).hover( function() { $(this).css("backgroundColor", "#B4B388;") }, function() { $(this).css("backgroundColor", "#9D9C6E;") });

        $(handle).mousedown( function() {
          $(this).css("backgroundColor", "#DBDBBF;");

        });
        $(handle).mouseup( function() {
          $(this).css("backgroundColor", "#9D9C6E;");
        });

	ocontainer = $('.scroll-container');
	ocontent = $('.scroll-contents');
	containerInner = jQuery.iUtil.getClient(ocontainer.get(0));
	contentSize = jQuery.iUtil.getSize(ocontent.get(0));
	spaceToScroll = contentSize.hb - containerInner.h;

	$('.scroll-bar').Slider(
		{
			accept : '.scroll-handle',
			onSlide : function( cordx, cordy, x , y)
			{

				ocontent.css('top', - spaceToScroll * cordy / 100 + 'px');
			}
		}
	);



		$('ul.sortable').Sortable(
			{
				accept : 	'itemcontainer',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				helperclass : 	'sorthelper',
				opacity: 	0.8,
				//fx:		200,
				revert:		true,
				tolerance:	'intersect',
				handle:         '.draghandle',
				onchange:       '' // write change function here.
			}
		)




        $('ul .scroll-container').hide();
        $('ul .changeImage').bind("click", f);



        $('ul .sortabledropitem img').click( function() {
          var a = $(this).parent().parent().parent().prev()[0];

          a.src = this.src;
          $(this).parent().parent().parent().parent().g();
          //can also put in a complete function here once the image is changed, calling ajax to make a server side change
          return false;

        });
});