Container = function( el ){
  var
    me = {
      el:el,
      win: $( window )
    }
  return me
}

Panel = function( el, params ){
  var me = Container( el ),
    //dom elements
    general_block = el.children( '.general_block' ),
    block = general_block.children( '.block' ),
    block = general_block.children( '.block' ),
    block_head = block.children( '.block_head' ),
    from = params.from,
    to = params.to,
    head = el.children( '.head' ),
    show_hide_panel = head.children( '.show_hide_panel' ),
    show_hide_block = block_head.children( '.show_hide_block' ),
    controls = block.children( '.controls' ),
    max_height = null,
    //--

    bottom = me.win.height() - from.offset().top,
    calc_max_heigth = function(){
      max_height = me.win.height() - ( to.offset().top + to.innerHeight() + bottom + head.innerHeight() )
      general_block.css( { 'max-height': max_height } )
    }

    //GLOBAL
    me.show_block = function( c ){
      var em = general_block.children( '.block.' + c )
        em.removeClass('hidden')
        em.show()
    }
    me.hide_block = function( c ){
      var em = general_block.children( '.block.' + c )
        em.addClass('hidden')
        em.hide()
    }
    me.head_by_class = function( c ){
      return general_block.children( '.block.' + c ).children( '.block_head' )
    }
    me.checkbox_by_block_class = function( c ){
      return me.head_by_class( c ).children( '.name' ).children( '.tile_layer_visible_checkbox' )
    }
    me.is_all_block_hidden = function(){
      return block.filter( '.hidden' ).length == block.length
    }
    me.init = function(){
      calc_max_heigth()
      el.css( { visibility: 'visible', display: 'none' } )
      el.fadeIn(3000)
    }

    me.general_block = function(){ return general_block }
    me.block_head = function(){ return block_head }
    me.controls = function(){ return controls }
    me.from = function(){ return from }
    me.bottom = function(){ return bottom }
    //--

    //bindings


  show_hide_panel.toggle(function()
    {
      var img = $( this ).children()
      img.attr( 'src', '/images/maximize_gray.png')
      general_block.hide()
    },
    function()
    {
      var img = $( this ).children()
      img.attr( 'src', '/images/minimize_gray.png')
      general_block.show()
    }
  )

  show_hide_block.toggle(
      function()
      {
        var el = $( this ).parent().next( '.controls' ),
          img = $( this ).children()
        img.attr( 'src', '/images/maximize_gray.png')
        el.hide()
      },
      function()
      {
      var el = $( this ).parent().next( '.controls' ),
          img = $( this ).children()
        img.attr( 'src', '/images/minimize_gray.png')
        el.show()
      }
    )

  me.win.bind( 'resize', calc_max_heigth )
  //--

  //onload
  //--
  return me
}

ControllPanel = function( el, params ){
  var me = Panel( el, params ),

    //dom elements
    visible_checkbox = me.block_head().children( '.name' ).children( '.tile_layer_visible_checkbox' ),
    slider = me.controls().children( '.tile_layer_opacity_slider' ),
    move_to_project_center = me.controls().children( '.move_to_project_center' )
    //--

  //GLOBAL
  me.check_visible = function( c ){
    me.checkbox_by_block_class( c ).attr( 'checked', true ) }

  me.uncheck_visible = function(c ){
    me.checkbox_by_block_class( c ).attr( 'checked', false ) }
  //--

  //bindings
  slider.slider({
    value: 1,
    orientation: "horizontal",
    animate: true,
    min: 0.2,
    max: 1,
    step: 0.2,
    change: function(event, ui) {
        var em = $(this)
        if( navigator.appName == 'Microsoft Internet Explorer' ){
          $('#YMapsID .' + em.attr('rel') + '_tiles').children().children().css('filter', 'alpha(opacity=' + ui.value * 100 + ')')
        }else{
          $('#YMapsID .' + em.attr('rel') + '_tiles').css(
            {
              '-moz-opacity': ui.value,
              '-webkit-opacity': ui.value,
              opacity: ui.value
            }
          )
        }
      }
    })

    move_to_project_center.click( function(){
        var em = $( this ),
        c=em.attr( 'rel' ).split( ',' )
        map.panTo(new YMaps.Point(parseInt( c[ 0 ] ),parseInt( c[ 1 ] )));
        return false
    } )

    visible_checkbox.change( function(){
      var em = $( this )
      if(em.attr('checked')){
        map.addLayer(em.attr('rel') + '_tiles')
      }else{
        map.removeLayer(em.attr('rel') + '_tiles')
      }
    } )
  //--

  //onload
  left = me.from().offset().left
  el.css( { left: left, bottom: me.bottom() } )
  me.check_visible( '.basic' )
  me.init()
  //--

  return me
}

SignPanel = function( el, params ){
  var me = Panel( el, params )
    //dom elements
    var empty_sign_panel = me.general_block().children( '.empty_sign_panel' ),
    show_tiles_side = empty_sign_panel.children( 'a' ),
    //--
    show_block = me.show_block,
    hide_block = me.hide_block
  //GLOBAL
  me.show_block = function( c ){
    show_block( c )
    if(!me.is_all_block_hidden())empty_sign_panel.hide()
  }
  me.hide_block = function( c ){
    hide_block( c )
    if(me.is_all_block_hidden())empty_sign_panel.show()
  }
  me.nav_to_tiles_side_bind = function( func ){
    show_tiles_side.click( func )
  }
  //
  //bind
  //--
  //onload
  right = me.win.width() - ( me.from().offset().left + me.from().innerWidth() )
  el.css( { right: right, bottom: me.bottom() } )
  if(!me.is_all_block_hidden())empty_sign_panel.hide()
  me.init()
  //--
  return me
}