/**
* @Component Name: PopupComponent
* @Module: App
* @Module Functionality : To display the popup information
* @Creation Date: August 12,2017
* @Author: sbaireddy
* @Version: 1.0
*/
import { Component, Input, OnInit } from '@angular/core';
declare var $: any;

@Component({
  moduleId: module.id,
  selector: 'popup-cmp',
  templateUrl: 'popup.component.html',
  styleUrls: ['popup.component.css']
})

export class PopupComponent implements OnInit {
  private COMPONENT_NAME: string = 'PopupComponent';
  visible: boolean = false;
  visibleAnimate: boolean = false;
  @Input() modelWidth: number; // .5|.7

  constructor() { }
/**
 * This function is used to initialize the directive/component after Angular
 * first displays the data-bound properties.It is invoked only once when the
 * directive is instantiated
 * @returns void
 */
  ngOnInit(): void {
    const METHOD_NAME: string = 'ngOnInit()';
      if (this.modelWidth) {
        const newWidth = ($(window).width() * .7);
        $('#mainContainer').css({
          'maxWidth': newWidth
        });
      }
  }
    /**
    * This function used to display the  object.
    * @return {void}
    */
  public show(): void {
    const METHOD_NAME: string = 'show()';
//    console.log('called');
    this.visible = true;
    this.visibleAnimate = true;
  }
    /**
     * This function is used to hide the object.
     * @returns void
     */
  public hide(): void {
    const METHOD_NAME: string = 'hide()';
    this.visible = false;
    this.visibleAnimate = false;
  }
     /**
     * This function is used to hide the object when nouse event performed
     * @param  {MouseEvent} event contains valid mouse event
     * @returns void
     */
  public onContainerClicked(event: MouseEvent): void {
    const METHOD_NAME: string = 'onContainerClicked()';
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }

}