function moveSampleTo(id, x, y, pos, offs)
{
    var el=$('#s'+id+'_cont');
    var pos=2;

    offs = offs || 7;

    //if (x+430 > $(window).width()) pos|=1;
    //if (y+200 > $(window).height()) pos|=2;


    if (pos & 1)
        el.css('left', x-el.width()-offs+'px')
    else
        el.css('left', x+offs+'px')

    if (pos & 2)
        el.css('top', y-el.height()-offs+'px')
    else
        el.css('top', y+offs+'px')

}

function init_samples(s_ids)
{
    for (var i=0; i<s_ids.length; i++)
    {
        var sid=s_ids[i];
        var cont=$('<div id="s'+i+'_cont" class="sample_cont"></div>');
        $('#samples').append(cont);

        var th=$('<li id="s'+i+'_thumb" class="sample_thumb"><img src="/static/img/samples/'+sid+'-thumb.jpg" /></li>');

        th.bind('mouseover', function (cid)
                {
                    return function (evt)
                    {
                        show_sample(cid, 1, evt);
                        $(this).bind('mousemove',
                        function (evt) {
                            moveSampleTo(cid, evt.pageX, evt.pageY);
                        });
                    }
                }(i)
          )
          .bind('mouseout', function (cid)
                {
                    return function(evt)
                    {
                        show_sample(cid, 0, evt);
                        $(this).unbind('mousemove');
                    }
                }(i));

        $('#samples').append(th);


//        var d=$('<div id="s'+i+'_before" class="sample_spec_cont"></div>');
//        d.html('<img src="/static/img/samples/'+sid+'-before.jpg" />');
//        $(cont).append(d);
//
//        d=$('<div id="s'+i+'_after" class="sample_spec_cont"></div>');
//        d.html('<img src="/static/img/samples/'+sid+'-after.jpg" />');
//        $(cont).append(d);
        $(cont).html('<table><tr><td><img src="/static/img/samples/'+sid+'-before.jpg" /><td><img src="/static/img/samples/'+sid+'-after.jpg" /></table>');

        //$(cont).append('<img src="/static/img/samples/'+sid+'-before.jpg" />');
        //$(cont).append('<img src="/static/img/samples/'+sid+'-after.jpg" />');

    }
}

function show_sample(id, show, evt)
{
    var el=$('#s'+id+'_cont');
    if (show)
    {
        el.show();
        moveSampleTo(id, evt.pageX, evt.pageY);
    }
    else
        el.hide();
}