var arr = {
    'bCp1':'des-absolute',
    'bCp2':'content-1',
    'bCp3':'content-2',
    'bCp4':'content-3',
    'bCp5':'content-4',
    'bCp7':'content-6',
    'bCp8':'content-7',
    'bCp9':'content-8',
    'bCp6':'content-5'
};
var arrTool = ['128bit','256bit'];
document.observe('dom:loaded', function(){
    new Effect.SlideDown('rightMenu',{
        duration: '4',
        transition: Effect.Transitions.spring
    });
    //    var layoutCont = new Element.Layout('conct');
    //    var width = layout.get("width");
    //    var per = "";
    //arrTool.each(function(v){
    //    new Tooltip(v, v+"C");
    //});
    new Effect.SlideUp('infoct',{
        duration: "1",
        scaleX : true,
        scaleY : false
    });
    $('infoct').d = true;
    $('infoct').c = true;
    new Effect.Opacity('panah',{
        duration: "5",
        from : 0,
        to :1
    });
    $$('.logoHome').invoke("on","click",function(){
        location.href = "http://mediascope.co.id/";
    });
    $("buttonct").on("click",function(e){
        if($('infoct').c){
            $('infoct').c = false;
            if($('infoct').d){
                new Effect.SlideDown('infoct',{
                    duration: "1",
                    scaleX : true,
                    scaleY : false,
                    scaleFrom: 1,
                    scaleTo: 80,
                    afterSetup: function(effect) {
                        effect.element.makePositioned();
                        effect.element.down().makePositioned();
                        if (window.opera) effect.element.setStyle({
                            top: ''
                        });
                        effect.element.makeClipping().show();
                    },
                    afterFinish:function(effect){
                        $('infoct').c = true;
                    }
                });
                $('infoct').d = false;
            }else{
                new Effect.SlideUp('infoct',{
                    duration: "1",
                    scaleX : true,
                    scaleY : false,
                    afterFinish:function(effect){
                        $('infoct').c = true;
                    }
                });
                $('infoct').d = true;
            }
        }
        
        
    });
    $H(arr).each(function(val){
        if($(val.key))
            $(val.key).on('click',function(e){
                //                if($("ctb").d){
                //                    Effect.SlideUp("ctf", {
                //                        duration: '1'
                //                    });
                //                    $("ctb").d = false;
                //                    $("ctb").setAttribute("src", "/webAID/images/contactDown.png");
                //                }

                var el = Event.element(e);
                $$("ul.index li.index-items a.cur").each(function(e){
                    e.removeClassName("cur");
                });
            el.addClassName("cur");
            Effect.ScrollTo(val.value, {
                duration:'2',
                transition: Effect.Transitions.sinoidal
            });
            if(val.value == 'des-absolute'){
                Effect.SlideDown('des-absolute',{
                    duration: '8',
                    transition: Effect.Transitions.spring
                });
            }
                

               
        });
    });
    $$("#FOM" ,"div.rowFOM").invoke('on','click',function(e){
        FOM.next();
    });
    //    $("ctb").on('click',function(e){
    //        var el = Event.element(e);
    //        if(el.d != undefined ){
    //            if(el.d){
    //                Effect.SlideUp("ctf", {
    //                    duration: '1'
    //                });
    //
    //                el.d = false;
    //                $("ctb").setAttribute("src", "/webAID/images/contactDown.png");
    //            }else{
    //                Effect.SlideDown("ctf", {
    //                    duration: '1'
    //                });
    //
    //                el.d = true;
    //
    //                $("ctb").setAttribute("src", "/webAID/images/contactUp.png");
    //            }
    //        }else{
    //            Effect.SlideDown("ctf", {
    //                duration: '1'
    //            });
    //            el.d = true;
    //
    //            $("ctb").setAttribute("src", "/webAID/images/contactUp.png");
    //        }
    //    });
    
    
});
    

var FOM = {
    next : function(){
        var get = false;
        $H(arr).each(function(val){
            if($(val.value).viewportOffset().top > 0){
                //                if($("ctb").d){
                //                    Effect.SlideUp("ctf", {
                //                        duration: '1'
                //                    });
                //                    $("ctb").d = false;
                //        [            $("ctb").setAttribute("src", "./images/contactDown.png");
                //                }
                
                Effect.ScrollTo(val.value, {
                    duration:'2',
                    transition: Effect.Transitions.sinoidal
                });
                if(val.value == 'des-absolute'){
                    $('des-absolute').hide();
                    Effect.SlideDown('des-absolute',{
                        duration: '8',
                        transition: Effect.Transitions.spring
                    });
                }
                
                get = true;
                throw $break;
            }
        });
        if(!get) {
            Effect.ScrollTo(arr.bCp1, {
                duration:'2',
                transition: Effect.Transitions.sinoidal
            });
            Effect.SlideDown('des-absolute',{
                duration: '8',
                transition: Effect.Transitions.spring
            });
        }

    }
    
};


/*
 * Copyright (c) 2006 Jonathan Weiss <jw@innerewut.de>
 *
 * Permission to use, copy, modify, and distribute this software for any
 * purpose with or without fee is hereby granted, provided that the above
 * copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 */


/* tooltip-0.2.js - Small tooltip library on top of Prototype
 * by Jonathan Weiss <jw@innerewut.de> distributed under the BSD license.
 *
 * This tooltip library works in two modes. If it gets a valid DOM element
 * or DOM id as an argument it uses this element as the tooltip. This
 * element will be placed (and shown) near the mouse pointer when a trigger-
 * element is moused-over.
 * If it gets only a text as an argument instead of a DOM id or DOM element
 * it will create a div with the classname 'tooltip' that holds the given text.
 * This newly created div will be used as the tooltip. This is usefull if you
 * want to use tooltip.js to create popups out of title attributes.
 *
 *
 * Usage:
 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
 *   <script type="text/javascript">
 *     // with valid DOM id
 *     var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
 *
 *     // with text
 *     var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description')
 *
 *     // create popups for each element with a title attribute
 *    Event.observe(window,"load",function() {
 *      $$("*").findAll(function(node){
 *        return node.getAttribute('title');
 *      }).each(function(node){
 *        new Tooltip(node,node.title);
 *        node.removeAttribute("title");
 *      });
 *    });
 *
 *   </script>
 *
 * Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
 * be shown. On o mouseOut the tooltip disappears.
 *
 * Example:
 *
 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
 *   <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
 *
 *   <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
 *     Detail infos on product 1....<br />
 *   </div>
 *
 *   <div id='product_1'>
 *     This is product 1
 *   </div>
 *
 *   <script type="text/javascript">
 *     var my_tooltip = new Tooltip('product_1', 'tooltip')
 *   </script>
 *
 * You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
 */

var Tooltip = Class.create();
Tooltip.prototype = {
  initialize: function(element, tool_tip) {
    var options = Object.extend({
      default_css: false,
      margin: "0px",
        padding: "5px",
        backgroundColor: "#d6d6fc",
        min_distance_x: 5,
      min_distance_y: 5,
      delta_x: 0,
      delta_y: 0,
      zindex: 1000
    }, arguments[2] || {});

    this.element      = $(element);

    this.options      = options;

    // use the supplied tooltip element or create our own div
    if($(tool_tip)) {
      this.tool_tip = $(tool_tip);
    } else {
      this.tool_tip = $(document.createElement("div"));
      document.body.appendChild(this.tool_tip);
      this.tool_tip.addClassName("tooltip");
      this.tool_tip.appendChild(document.createTextNode(tool_tip));
    }

    // hide the tool-tip by default
    this.tool_tip.hide();

    this.eventMouseOver = this.showTooltip.bindAsEventListener(this);
    this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);
    this.eventMouseMove  = this.moveTooltip.bindAsEventListener(this);

    this.registerEvents();
  },

  destroy: function() {
    Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
    Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
    Event.stopObserving(this.element, "mousemove", this.eventMouseMove);
  },

  registerEvents: function() {
    Event.observe(this.element, "mouseover", this.eventMouseOver);
    Event.observe(this.element, "mouseout", this.eventMouseOut);
    Event.observe(this.element, "mousemove", this.eventMouseMove);
  },

  moveTooltip: function(event){
      Event.stop(event);
      // get Mouse position
    var mouse_x = Event.pointerX(event);
      var mouse_y = Event.pointerY(event);

      // decide if wee need to switch sides for the tooltip
      var dimensions = Element.getDimensions( this.tool_tip );
      var element_width = dimensions.width;
      var element_height = dimensions.height;

      if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.min_distance_x) ){ // too big for X
          mouse_x = mouse_x - element_width;
          // apply min_distance to make sure that the mouse is not on the tool-tip
          mouse_x = mouse_x - this.options.min_distance_x;
      } else {
          mouse_x = mouse_x + this.options.min_distance_x;
      }

      if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.min_distance_y) ){ // too big for Y
          mouse_y = mouse_y - element_height;
        // apply min_distance to make sure that the mouse is not on the tool-tip
          mouse_y = mouse_y - this.options.min_distance_y;
      } else {
          mouse_y = mouse_y + this.options.min_distance_y;
      }

      // now set the right styles
      this.setStyles(mouse_x, mouse_y);
  },


  showTooltip: function(event) {
    Event.stop(event);
    this.moveTooltip(event);
      new Element.show(this.tool_tip);
  },

  setStyles: function(x, y){
    // set the right styles to position the tool tip
      Element.setStyle(this.tool_tip, { position:'absolute',
                                        top:y + this.options.delta_y + "px",
                                        left:x + this.options.delta_x + "px",
                                        zindex:this.options.zindex
                                      });

      // apply default theme if wanted
      if (this.options.default_css){
          Element.setStyle(this.tool_tip, { margin:this.options.margin,
                                                            padding:this.options.padding,
                                              backgroundColor:this.options.backgroundColor,
                                                              zindex:this.options.zindex
                                            });
      }
  },

  hideTooltip: function(event){
      new Element.hide(this.tool_tip);
  },

  getWindowHeight: function(){
    var innerHeight;
      if (navigator.appVersion.indexOf('MSIE')>0) {
          innerHeight = document.body.clientHeight;
    } else {
          innerHeight = window.innerHeight;
    }
    return innerHeight;
  },

  getWindowWidth: function(){
    var innerWidth;
      if (navigator.appVersion.indexOf('MSIE')>0) {
          innerWidth = document.body.clientWidth;
    } else {
          innerWidth = window.innerWidth;
    }
    return innerWidth;
  }

}