Bkms



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bookmarks</title>
   <script type="text/javascript" src="jquery.min.js"></script>


   <script type="text/javascript">

   var gl_moved;
   var gl_moved4;
  //--------------------------------------toggle lightbox
      function showlb(on) {
             if (on) {
                    $('#lbox').css('width',screen.width+'px');
                        $('#lbox').css('height',screen.height+'px');

                        $('#lbox').fadeIn('slow');
                        $('#arrows').css('display','none');
                 }
                 else {
                    $('#lbox').fadeOut('slow');
                    $('#arrows').css('display','block');
                 }

          }

   //------------------------------------------
   function mouseDown(e) {

             e= e || event;

                 prevX=e.clientX;
                 prevY=e.clientY;

                 $('#inpic').bind('mousemove',mouseMove);
                 $('#inpic').bind('mouseup',mouseUp);

                 gl_moved=false;

                 return false;
          }
          //----------------------------------
          function mouseMove(e) {

                 e = e || event;
                 var diffX = e.clientX-prevX;
                 var diffY = e.clientY-prevY;

                 prevX=e.clientX;
                 prevY=e.clientY;

                 $(this).css('left', (this.offsetLeft+diffX)+'px');
                 $(this).css('top', (this.offsetTop+diffY)+'px');

                 gl_moved=true;
          }
          //----------------------------------
          function mouseUp(e) {
             $(this).unbind('mouseup',mouseUp);
                 $(this).unbind('mousemove',mouseMove);


                 if (!gl_moved) {
                    showlb(false);
                 }

                 //e = e || event;
                 //e.stopPropagation();

          }
   //-------------------------------------------
   ddrop = function() {

      _self = this;

      this.hook = function (el) {
             el.onmousedown = this.mouseDown;
             el.onmousemove = this.mouseMove;
             el.onmouseup = this.mouseUp;
             el.onmouseout = this.mouseOut;
          }
          //--------------------------
          this.mouseDown = function(ev) {

                 ev = ev || event;
                 var target = this;
                 target.pressed=true;
                 gl_moved4 = false;

                 //console.log('down_id='+target.id);

                 var scrolled = window.pageYOffset || document.documentElement.scrollTop;

                 target.yBase=-ev.clientY-scrolled;
                 target.yStart = ev.clientY;

                 target.style.cursor='pointer';

                try {
                    ev.preventDefault()
                 } catch (ex) {
                    ev.returnValue=false;
                 }

          }
          //--------------------------
          this.mouseMove = function(ev) {

             ev = ev || event;
             var target =  this;

             //console.log('move_id='+target.id);

             if (target.pressed) {
                 window.scrollTo(0, -ev.clientY - target.yBase);

                 if (Math.abs(ev.clientY - target.yStart)>8)
                    gl_moved4=true;

                 ev.stopPropagation();
                 }
          }
          //--------------------------
          this.mouseUp = function(ev) {

             ev = ev || event;
             var target = this;

             //console.log('up_id='+target.id);

             target.pressed=false;

          }

        //--------------------------
          this.mouseOut = function(ev) {

             ev = ev || event;
             var target = this;
             if (!target.pressed)
                return;


             if (!ev.relatedTarget && ev.fromElement)
                    var relatedTarget = (ev.fromElement==ev.target)
                        ? ev.toElement : ev.fromElement;
                 else
                    var relatedTarget = ev.relatedTarget;

             if (relatedTarget.id=='ajaxblock')
                   return;

                if ($(relatedTarget).parents('#ajaxblock').length!=0)
                   return;

             target.pressed=false;

          }
      }

      //-------------------------------------------
      function slick() {

          window.scrollBy(0,vy);
          vy *=ay;
          if (Math.abs(vy)<3) {
             vy=0;
             clearInterval(z_int);
          }
      }

   //-------------------------------------------
      $(document).ready(init);

       ajax_get='';
       ajax_post='';

      //------------------------------------------
      function init() {

               $('#toptop a').click (
                  function() {
                     //$('body').animate({'scrollTop':0}, 'slow');

                     window.scrollTo(0,0);
                     return false;
                  }
               );

               $('#artop a').click(
                 function() {
                    return false;
                 }
               );
               $('#arbottom a').click(
                 function() {
                    return false;
                 }
               );

               $('#artop a').mousedown(
                function() {
                    if (window.z_int)
                       clearInterval(z_int);

                    window.vy = -8;
                    window.ay = 1.05;
                    window.z_int = setInterval(function() {slick();}, 10);
                    return false;
                }
               );
               $('#artop a').mouseup(
                function() {
                    window.ay = 0.9;
                    return false;
                }
               );
              $('#artop a').mouseout(
                function() {
                    window.ay = 0.9;
                    return false;
                }
               );

               $('#arbottom a').mousedown(
                function() {
                    if (window.z_int)
                       clearInterval(z_int);

                    window.vy = 8;
                    window.ay = 1.05;
                    window.z_int = setInterval(function() {slick();}, 10);
                    return false;
                }
               );
               $('#arbottom a').mouseup(
                function() {
                    window.ay = 0.9;
                    return false;
                }
               );
              $('#arbottom a').mouseout(
                function() {
                    window.ay = 0.9;
                    return false;
                }
               );


               //----------------------------------
               var Ddrop = new ddrop();

               Ddrop.hook($('#ajaxblock').get(0));

               //----------------------------------
               $('#lbox').click( function() {

                            if (!gl_moved) {
                               showlb(false);
                             }
                        });

              $('#inpic').bind('mousedown',mouseDown);

         $('.twitfeed img').each(

                  function(index) {
                     $(this).unbind('click').click(function() {

                     if (gl_moved4)
                        return;

                  var imgz= new Image();
                  imgz.src=$(this).attr('rel');
                  //console.log(imgz.src);


                  $(imgz).load (function() {

                         $('#inpic').empty().append($(this));

                         $('#inpic').css('left',
                         Math.floor(screen.width/2-this.width/2)+'px');

                         $('#inpic').css('top',
                         Math.floor(screen.height/2-this.height/2)+'px');
                         showlb(true);

           });
                 });

              });


         //-------------------
         $('a[rel^="_"], input:button[rel^="_"]').unbind('click').click ( function(ev) {

            var ev = ev || event;


            //--------------------------------
            if (this.hasAttribute('pg'))
               var page_id = this.getAttribute('pg');
            else
               var page_id = 'z';

            //--------------------------------
            if (!ajax_get)
               ajax_get = new Ajax_get();

            ajax_get.query($(this).attr('rel').slice(1), page_id);

            if (ev.preventDefault)
               ev.preventDefault();
            else
               ev.returnValue = false;

         });
         //-------------------
         $('form').filter(
            function(index) {
               return (this.hasAttribute('rel')) && ($(this).attr('rel').substr(0,1)=='_');})
               .unbind('submit')
               .submit( function(ev) {

                  var ev = ev || event;

                  if (!ajax_post)
                     ajax_post = new Ajax_post();

                  var data8 = {};
                  $(this).find('input[name]').each (
                     function(i) {
                        data8[this.name]=this.value;
                     }
                  );

                  $.when (ajax_post.query($(this).attr('rel').slice(1), data8))
                  .done(function(){updateState();});

                  if (ev.preventDefault)
                     ev.preventDefault();
                  else
                     ev.returnValue = false;

               });


         //----------------------------------
         $('#contentheader').unbind().ajaxStart(
            function() {
               $(this).html('ajax request started...');
            }
         );
         //----------------------------------
         $('#contentheader').unbind().ajaxStop(
            function() {
               $(this).html('ajax request finished');
            }
         );
         //----------------------------------

      };

      //------------------------------------------
      Ajax_get = function () {

         var _self = this;

         //----------------------
         this.onSuccess = function(inf, status, xhr) {

            $('#ajaxblock').empty().html(inf);
                        //window.scrollTo(0,10000);
                        //window.scrollTo(0,0);

                    /*window.vy = 100;
                    window.ay = 0.99;
                    window.z_int = setInterval(function() {slick();}, 10);*/

            init();
         }

         //----------------------
         this.onError = function(xhr, status, exception) {

            var inf = [];
            inf.push ('ajaxResponse: <pre>'+xhr.responseText+'</pre>');
            inf.push ('status: '+xhr.status);
            inf.push ('ready state: '+xhr.readyState);
            inf.push ('text status: '+status);
            inf.push ('exception: '+exception);

            s = inf.join('<br/>');

            $('#ajaxblock').empty().html(s);
         }

         //----------------------
         this.query = function (action,  page_id) {

            var data = {
                  action: action
               };

            if (!isNaN(page_id)) {

               data['page'] = page_id
            }


            return $.ajax ( {
               type: 'GET',
               url: location.protocol + '//' +
                    location.hostname + location.pathname,

               data: data,
               success: _self.onSuccess,
               error: _self.onError
            })
         }
      };

      //------------------------------------------
      Ajax_post = function () {

         var _self = this;

         //----------------------
         this.onSuccess = function (inf, status, xhr) {

            $('#ajaxblock').empty().html(inf);

                    ajax_get.query('show_bookmarks', 'z');
         }

         //----------------------
         this.onError = function (xhr, status, exception) {

            var inf = [];
            inf.push ('ajaxResponse: <pre>'+xhr.responseText+'</pre>');
            inf.push ('exception: '+exception);

            s = inf.join('<br/>');

            $('#ajaxblock').empty().html(s);

         }

         //----------------------
         this.query = function (action, data) {

            return $.ajax ( {
               type: 'POST',

               url: location.protocol+'//'+ location.hostname +
               location.pathname +'?action='+action,

               data : data,
               success: _self.onSuccess,
               error: _self.onError
            });
         }

      }

      //-------------------------------------------------
      function updateState() {

         var addr = location.protocol+'//'+location.hostname+location.pathname;

         $.when ($.get( addr, {action: 'loginstatus'})).done(
            function(tx) {
               $('#loginblock').empty().html(tx);
               init();
            }
         );
      }

          //-------------------------------------------------

   </script>


   <style type="text/css">
      * {
         margin: 0;
         padding: 0;
         font-size: inherit;
      }

      ul {
         list-style-type: none;
      }

      a {
         color:inherit;
      }

      body {
         font-family: verdana, helvetica, sans-serif;
         font-size: 1em;
      }

      #container {
         width: 90%;

         margin: 0 auto;
      }

      #header {
         height: 100px;
         background: #800;
         color: white;
         position:relative;
      }

      #loginblock {
         position: absolute;
         left:50px;
         top: 20px;
         border: solid 1px #eee;
         padding: 20px 50px 15px 50px;
      }


      #sidebar {
             position: absolute;
                 top:0px;
                 left:400px;
         width: 300px;
         padding: 20px 0 0 0;
      }


      #twitlines li {
         height: 1.5em;
         line-height:1.5em;
         border-bottom: dotted 1px;
      }

      #twitlines input[type=radio] {
         width:50px;
      }

      #twitlines li a {
         text-decoration: none;
      }

      .controls {
         overflow: auto;
         margin: 10px 0 0 0;
         padding: 0 0 20px 0;

      }

      .controls li {
         float:left;
         margin-top: 5px;
         margin-right:10px;
         border: solid 1px #500;
         border-radius: 10px;
         background: #ffe;
         padding: 5px 10px;
         font-size: 0.75em;
      }

      .controls li a {

         text-decoration: none;
      }

      .controls li a:hover {

         text-decoration: underline;
      }

      #content {


      }

      #contentheader {
         height: 30px;
         background: #400;
         color: white;
      }

      #ajaxblock {

         border: dotted 1px #888;
      }

      #footer {

         height: 50px;
         background: #444;
         clear:left;
      }

      /*-------------------------*/
      .twitfeed {
         font-size: 0.75em;
      }

      .twitfeed li {
         position: relative;

            cursor:pointer;
            width:350px;
            height:300px;
            overflow:hidden;

            border-right:dotted 1px black;
            border-bottom:dotted 1px black;
            float:left;


      }

      .twitid {
         display:none;
      }
      .twittitle {
         line-height:1.5;
             display:none;
      }
      .twitdesc {
         display:none;
      }
      .twitlink {

      }
      .twitpubdate {

        position:absolute;
        right:0;
        bottom:0;
        background: #ffe;
        border: solid 1px #f5f5f5;
        color: #555;
        padding: 0 10px;
        width: 130px;

        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
      }

      .pager {
         overflow: auto;
         padding: 10px 0 15px 0;
      }
      .pager li {

         float:left;
         margin: 0 5px 4px 0;
         border: solid 1px #500;

         border-radius: 10px;
         -moz-border-radius: 10px;
         -webkit-border-radius: 10px;

         background: #ffe;
         font-size:0.75em;
         overflow:hidden;

      }
      .pager li a {

         display:block;

         height: 100%;
         padding: 0.5em 10px;
         text-decoration: none;

      }
      .pager li a:hover {

         background: #444;
         color: white;
      }
      /*-------------------------*/
      form {
         overflow: auto;
         padding: 5px;
         margin:5px;

      }

      form p {

      }

      form input[type=text] {
         margin-left:20px;
      }

      form input[type=button],
      form input[type=submit],
      form input[type=reset] {

         display:block;
         float: left;
         margin: 5px 5px 0 0;
         padding: 5px 8px;
         background: #f0f0f0;
         cursor:pointer;
         border: solid 1px #444;

         border-radius: 10px;
         -moz-border-radius: 10px;
         -webkit-border-radius: 10px;
      }

      form input[type=submit] {
         clear: left;
      }

  #lbox {
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      display: none;
   }

   #shade {
      position:absolute;
      background-color:black;
          opacity:0.8;
          filter:alpha(opacity=80);
          width:100%;
          height:100%;
          z-index:100;
   }

   #inpic {
      position:absolute;
          z-index:200;
          cursor:pointer;

   }


   #arrows {
      position:fixed;
      left:70%;
      top: 60%;
      margin-left:-100px;
      margin-top: -200px;
      z-index: 300;
   }

   #arrows div {
      width: 128px;
      height: 128px;
   }
   #arrows div a {
      display: block;
      width: 100%;
      height:100%;
      opacity: 0.4;
      filter: alpha(opacity=40);
   }

   #arrows div a:hover {
      opacity: 0.8;
      filter: alpha(opacity=80);
   }

   #toptop a {
      background-image: url('img/media-eject.png');
   }
   #artop a {
      background: url('img/arrow-alt-up.png');
   }
   #arbottom a {
      background: url('img/arrow-alt-down.png');
   }
   </style>
</head>

<body>

<div id="arrows">

   <div id="artop"><a href="#"></a></div>
   <div id="arbottom"><a href="#"></a></div>
   <div id="toptop"><a href="#"></a></div>
</div>

<div id="container">
   <div id="header">
      <div id="loginblock">
         logged out<br/><a href="#" rel="_show_loginout_form">log in</a>      </div>
   </div>

   <div id="sidebar">
      <div id="twitlines">
              </div>
      <div id="controls">
         <ul class="controls">
           <li><a href="#" rel="_show_bookmarks">show bookmarks</a></li>
       <li><a href="#" rel="_add_bookmark">add bookmark</a></li>

       </ul>      </div>
   </div>

   <div id="content">
      <div id="contentheader">
      </div>

      <div id="ajaxblock">
      </div>
   </div>

   <div id="footer">
   </div>


</div>

<div id="lbox">
  <div id="shade"></div>
  <div id="inpic"><img /></div>
</div>

</body>
</html>