/*
 * ADOBE CONFIDENTIAL
 *
 * Copyright (c) 2013-2014 Adobe Systems Incorporated. All rights reserved.
 *
 * NOTICE:  All information contained herein is, and remains
 * the property of Adobe Systems Incorporated and its suppliers,
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to Adobe Systems Incorporated and its
 * suppliers and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from Adobe Systems Incorporated.
 */

/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4 */
/*global define: true, graphite: true, setTimeout: true*/

define([
    'jquery',
    'underscore',
    'backbone',
    'ccweb.files.extract/Constants',
    'parfait/DetailPanelView',
    'ccweb.files.extract/views/layers/LayersListView',
    'ccweb.files.extract/views/inspect/PSDInspectView',
    'ccweb.files.extract/views/assets/PSDAssetsView',
    'ccweb.files.extract/controllers/DetailsController',
    'plugin-dependencies',
    'ccweb.files.extract/utils/TemplateUtil',
    'text!ccweb.files.extract/views/templates/detailPanelTemplate.html'
], function ($, _, Backbone, Constants, DetailPanelView, LayersListView, PSDInspectView,
    PSDAssetsView, DetailsController, deps, TemplateUtil, DetailPanelTemplate) {
    "use strict";

    var DWDetailPanelView = DetailPanelView.extend({
        tabs: ['psdInspectTab', 'psdLayersTab'],
        hidden: true,
        
        initialize: function () {
            this.render();
            DetailsController.on('change:selectedTab', this.handleSelectedTabChange, this);
            graphite.events.on('drawPreviewFinish', this.handleDrawPreviewFinish, this);
            graphite.events.on('assetExtracted', this.handleAssetExtracted, this);
            graphite.events.on('JSONPreviewReady', this.handleDrawPreviewFinish, this);
        },
        
        hidePanel: function () {
            if (!this.hidden) {
                $('.psd-preview-view')
                    .addClass('move-right');
                $('#detail-panel')
                    .addClass('remove-display');
                this.hidden = true;
            }
            graphite.events.trigger("hideOrShowDetailsPanel");
        },
        
        handleDrawPreviewFinish: function () {
            // Do nothing
        },
        
        render: function () {
            this.setElement(TemplateUtil.createTemplate(DetailPanelTemplate,
                {
                    loggedIn: deps.utils.getCurrentPage()
                }));

            if (this.model !== null) {
                var $psdInspectSection = this.$el.find('#psdInspectSection'),
                    $psdInfoSection = this.$el.find('#psdInfoSection'),
                    $psdAssetsSection = this.$el.find('#psdAssetsSection'),
                    localContent = this.model.get('localContent');

                this.psdInspectView = new PSDInspectView({model: this.model});
                this.layersListView = new LayersListView({model: this.model});

                $psdInspectSection.empty();
                $psdInspectSection.append(this.layersListView.el);

                $psdInfoSection.empty();
                $psdInfoSection.append(this.psdInspectView.el);

                if (!localContent && !graphite.inPublicOneUp()) {
                    this.assetsListView = new PSDAssetsView({model: this.model});
                    $psdAssetsSection.empty();
                    $psdAssetsSection.append(this.assetsListView.el);
                }

                this.$el.find('section').scroll(function () {
                    graphite.events.trigger('hide-extract-asset-popup');
                    graphite.events.trigger('hide-extract-code-popup');
                    graphite.events.trigger('hide-color-popup');
                });
            }

            DetailsController.setSelectedTab('');
            return this;
        },
        
        showPanel: function () {
            if (this.hidden) {
                $('.psd-preview-view')
                    .removeClass('move-right');
                $('#detail-panel')
                    .removeClass('remove-display');
                this.hidden = false;
            }
            graphite.events.trigger("hideOrShowDetailsPanel");
        },

        handleSelectedTabChange: function () {
            var selectedTab = DetailsController.get("selectedTab"),
                sections = this.$el.find("section");
            
            if (selectedTab) {
                this.showPanel();
            } else {
                this.hidePanel();
            }

            this.tabs.forEach(function (tab, index) {
                if (tab === selectedTab) {
                    $(sections[index]).addClass("active");
                    $(sections[index]).children().first().trigger("activate");
                } else {
                    $(sections[index]).removeClass("active");
                }
            });

            if (selectedTab === "psdAssetsTab") {
                this.$el.find("#assetCounter").removeClass("new_asset");
            }
        }
    });

    return DWDetailPanelView;
});
